css常用干货 | 选择器 | 属性 | 盒子模型 - 知识点罗列
用户投稿 学习笔记 15阅读
CSS常用属性
字体样式属性
CSS中的单位 外观样式属性 标签切换模式切换(display属性) 背景属性盒子模型 盒子模型概念
所有HTML元素都可以看做是一个作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
标准盒子模型（W3C盒子模型）：宽=内部宽度（content）+border+padding+margin
怪异盒子模型（IE盒子模型）：宽=内部宽度（content+border+padding）+margin
边框div{/*设置四条边框都为1px宽度的蓝色实线*//*border:1px solid blue;*//*设置上边框为8px宽度的蓝色实线*/border-top: 8px solid blue;/*设置右边框为8px的红色双实线*/border-right: 8px double red;/*设置下边框为8px的黄色虚线*/border-bottom: 8px dashed yellow;/*设置左边框为8px的粉色圆点*/border-left: 8px dotted pink;} 内边距和外边距1. 内边距padding用来设置边框与内部内容之间的距离，内边距会改变元素本身大小
2. 外边距margin用来设置边框与边框之间（多个元素之间）的距离。通过外边距可以实现元素自身的居中
/*设置盒子居中要求必须指定宽度*/div{height:200px;width:200px;margin:0 auto;} 内/外边距属性设置一次设置多个值
外边距的计算
1. 水平外边距相加即可
2. 垂直外边距取最大值
3. 嵌套时的垂直外边距：如果父类元素没有上内边距和边框，则父元素的上外边距会与子元素的上外边框合并。合并后的外边距为两者中的最大值。
浮动元素设置浮动是让该元素脱离原本的标准文档流，移动到其父类中指定的位置的过程。
浮动的特点浮: 加了漂浮的元素盒子是浮起来的，漂浮在其他的标准流盒子之上。漏：加了漂浮的元素盒子不占据位置，原先的位置漏给标准流文档中的元素。特：浮动的盒子具有行内块的特性 浮动的语法div{height:200px;width:200px;/*设置元素左浮动*/float:left;/*设置元素右浮动*/float:right;} 清除浮动clear的方式清除浮动
div{/*清除左浮动*/clear:left;/*清除右浮动*/clear:right;/*清除所有浮动*/clear:both;}额外标签法清除浮动
<div style="clear:both;"></div>父级控制法清除浮动
/*此处div一定是已经有了浮动效果的元素的父级标签*/div{/*父级元素只要有overflow属性就可以自动清除浮动，取值hidden或auto都可以。*/overflow:hidden;}after伪元素方式清除浮动
/*使用单独的标签来调用样式实现清楚浮动*/ .clearfix::after{ content: ""; display: block; clear: both; height: 0; visibility: hidden; } .clearfix{ /*IE8以下浏览器专用清除浮动代码*/ *zoom:1; }before+after双伪元素方式清除浮动
.clearfix::after,.clearfix::before{ content: ""; display: table; } .clearfix::after{ clear: both; } .clearfix{ *zoom:1; } 定位 定位模式偏移量 left：表示元素左侧偏移量，相对于其父级左边框的距离right：表示元素右侧偏移量，相对于其父级右边框的距离top：表示元素上侧偏移量，相对于其父级上边框的距离bottom：表示元素下侧偏移量，相对于其父级下边框的距离 叠放次序
当多个元素设置定位时，定位的元素之间，有可能发生重叠的现象。对定位元素使用z-index属性来设置层叠的顺序。
z-index的默认值是0.可选值范围正整数、0和负整数。值越大，定位元素在层叠越优先。如果值相同，按照书写顺序匹配优先级。
z-index属性只针对定位元素有效。static也是无效的！！！！
定位总结 显示与隐藏 display控制display控制隐藏的元素会释放空间
div{/*设置元素显示*/display:block;/*设置元素隐藏*/display:none;} visibility控制visibility控制隐藏的元素依然占据空间
div{/*设置元素可见*/visibility:visbile;/*设置元素不可见*/visibility:hidden;} overflow控制 overflow控制内容超出范围后的管理方案div{/*默认值，超出内容不做任何处理*/overflow:visible;/*超出内容隐藏*/overflow:hidden;/*超出内容增加滚动条*/overflow:auto;/*不管是否超出都增加滚动条*/overflow:scroll;} 界面样式 鼠标样式/*常用样式*/div{/*默认样式*/cursor:default;/*手指样式*/cursor:pointer;}<!-- 其他鼠标样式（了解即可） --><ul><li style="cursor: crosshair;">十字线鼠标</li><li style="cursor: pointer;">连接样式（一只手）</li><li style="cursor: move;">可移动</li><!-- 上下左右和地图方位对应，上北下南左西右东 --><li style="cursor: e-resize;">向右拖动</li><li style="cursor: w-resize;">向左拖动</li><li style="cursor: n-resize;">向上拖动</li><li style="cursor: s-resize;">向下拖动</li><li style="cursor: ne-resize;">向右上拖动</li><li style="cursor: nw-resize;">向左上拖动</li><li style="cursor: se-resize;">向右下拖动</li><li style="cursor: sw-resize;">向左下拖动</li><li style="cursor: text;">文本标识</li><li style="cursor: wait;">等待标识</li><li style="cursor: help;">帮助文档</li></ul> 轮廓样式 轮廓（outline）的语法设置和边框（border）的语法设置一致，但是设置轮廓不占据空间，设置边框会改变元素大小。边框可以设置圆角，轮廓不能设置一般给轮廓设置none，清除html标签自带的轮廓样式（input） input{/*清空轮廓样式，值给0效果也一样*/outline:none;/*设置粗细为1px的红色实线轮廓*/outline:1px solid red;} 文本域拖拽默认情况下，谷歌火狐等浏览器可以让用户随意的拖动textarea标签的大小。设置resize值为none来禁用该功能。
textarea{resize:none;} 垂直对齐使用vertical-align来设置文本的垂直对齐方式，该属性只对行级标签有效。
textarea{ /*设置文本域禁止拖拽*/ resize: none; /*基线对齐，默认值*/ vertical-align: baseline; /*垂直对齐*/ vertical-align: middle; /*顶部对齐*/ vertical-align: top; } <div> <form action=""> <div> <label for="username">用户名</label> <input type="text" id="username"> </div> <div> <label for="address">地址</label> <textarea name="address" id="address" cols="30" rows="10"></textarea> </div> </form> </div> 文字溢出控制 设置溢出内容是否换行div{/*默认值，自动换行*/white-space:normal;/*设置超出内容强制不换行*/white-space:nowrap;} 设置溢出内容样式搭配overflow属性来实现超出内容自动截取并在最后追加省略号。
div{overflow:hidden;white-space:nowrap;/*设置超出的内容被裁剪，并显示省略号*/text-overflow:ellipsis;/*设置超出内容直接裁剪，不显示省略号*/text-overflow:clip;}