CSS的常用属性(二)

2018-06-24 02:14:23来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

盒子模型之边框

border-(top/bottom/left/right)-style: solid 边框的风格 如(solid 实线,dotted 点线,dashed 虚线)

border-top-color: #aaa 边框颜色

border-top-width: 20px 边框粗细

边框四个方向连写:border-color: #000

边框属性连写: border-top: #555 solid 5px

四个方向边框属性同写: border: 12px dashed 10px

注意: 没有顺序要求,但边框风格也就是线型不能少

补充:

边框合并: border-collapse: collapse

去掉边框: border: 0 none

去掉路轮廓线: outline-style: none

 

盒子模型之内边距

padding-left: 20px;

padding-right: 10px;

padding-top: 30%;

padding-bottom: 40%;

属性连写:

padding: 20px; 上下左右都为20px

padding: 10px 20px; 上下为10px,左右为20px

padding: 10px 20px 30px; 上内边距为10px,左右为20px,底为30px

padding: 10px 20px 30px 40px; 上10px,右20px,下30px,左40px

注意: 给盒子指定宽高,在里面使用padding会撑大盒子

补充: 盒子的宽度等于: 定义的宽度+边框宽度+左右内边距

 

盒子模型之外边距

margin(与内边距使用方法相似): margin: 20px

margin: 20px auto  (auto表示自适应,个人理解就是居中)

补充: 两个盒子垂直,上面的盒子设置下边距。下面的盒子设置下边距,两个盒子的边距取设置边距大的那个

解决:嵌套的盒子外边距塌陷

当给子盒子里设置如margin-top: 10px时,父盒子相对于顶部向下移动了10px,而子盒子相对于父盒子没有移动

两种方法解决: 第一个是给父盒子设置一个边框;第二个方法是给父盒子设置: overflow: hidden;(内容溢出元素框时隐藏)

补充: 行内元素可以定义左右的内外边距,上下会被忽略;行内块可以定义内外边距

 

浮动布局

float: left / right

特点:

元素浮动后不占据原来的位置(脱标)

浮动的盒子在一行显示(除非边框已经无法容纳)

行内元素浮动后会转化成行内块元素

清除浮动的方法: 

clear: left / both / right  用的最多的是clear: both

第一种方法: <div style="clear: both;"></div>

第二种方法: overflow: hidden

注意: 如果内容出了盒子,则不能使用这个方法

第三种方法: 伪元素清除浮动(推荐使用)

.clearfix:after{

  content: ".";

  display: block;

  height: 0;

  line-height: 0;

  visibility: hidden;  规定元素不可见(但会占据页面上的空间)

  clear: both;

}

兼容IE浏览器:

.clearfix{

  zoom: 1;

}

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:BootStrap实例

下一篇:web前端性能优化汇总