css2选择器,盒模型

2018-10-18  本文已影响0人  f6d8ee519880

1、css选择器

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->
#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式,其它元素不允许应用此样式 -->
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

2、css盒模型

border-color:red;    /* 设置顶部边框颜色为红色 */  
border-width:10px;   /* 设置顶部边框粗细为10px */   
border-style:solid;  /* 设置顶部边框的线性为实线,常用的有:solid(实线)  
  dashed(虚线)  dotted(点线); */
可以总结为 border:10px solid red;
padding-top:20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */
上面的顺序是顺时针,依次是上,右,下,左
也可以为padding:20px 40px 50px 30px;

3、css元素溢出

1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。 
上一篇 下一篇

猜你喜欢

热点阅读