1. 内联样式：内联样式又称为行内样式，使用标签的style属性来设置，只能设置一个标签的样式。谨慎使用。
2. 内部样式：写在head标签中的style标签内，只能设置当前页面的样式。酌情使用。
3. 外部样式：单独的CSS文件，使用link标签的href属性引入。只要引入了该文件的页面都可以被设置样式。推荐使用。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;
}
