HTML+CSS

HTML+CSS

float 浮动

解决浮动超出父元素的范围：

1.溢出，超出边界的元素父元素可以做自动的调整
overflow:auto;
2.清除浮动，在不希望收到浮动影响的元素上添加可以避免浮动的影响
clear:left/right/both

浮动元素排列的时候只要参考前一个元素的位置

浮动的重叠问题

1. 浮动元素不会覆盖文字内容
2. 浮动元素不会覆盖图片内容（图也属于文本）
3. 浮动元素不会覆盖表单元素

浮动的特性

脱离标准流，不占位置，浮动只有左右浮动

CSS属性简写

背景属性

background

background-color	/*背景色*/
background-image	/*背景图*/
background-repeat	/*背景平铺方式*/

background：gray url(xx/xx.png) no-repeat;	/*背景色，背景图，平铺方式*/

边框属性

border

border-width	/*边框宽度*/
border-style	/*边框样式*/
border-color	/*边框颜色*/

border:1px solid #D3f402;	/*宽度，样式，颜色；只有边框颜色可以省略*/

字体样式

font

font-style:italic;	/*斜体*/
font-weight:bold;	/*加粗*/
font-family:arial,sans-serif;	/*字体类型*/
font-size:20px;	/*字体大小*/
line-height:35px;	/*行高*/

font:italic bold 20px/35px arial,sans-serif,"微软雅黑"；
	/*斜体   加粗 字体大小 行高  默认字体  备用字体  备用字体*/

外边距

margin

margin-top
margin-right
margin-bottom
margin-left

margin:10px 15px 10px 15px;	/*上 右 下 左  顺时针顺序*/
/*三个的话就是上 左右 下*/
/*两个的话就是上下 左右*/

内边距

padding

padding-top
padding-right
padding-bottom
padding-left

padding:10px 15px 10px 15px;	/*上 右 下 左  顺时针顺序*/
/*三个的话就是上 左右 下*/
/*两个的话就是上下 左右*/

元素三大类型

块元素：可以设置宽高大小，独占一行，默认宽度100%。

内联（行内）元素：无法设置宽高，元素大小随内容变化，所有元素默认排在一行。

内联块元素：设置宽高，能排在一排显示。

CSS控制元素类型

display

display: block(块元素)
display: nline(内联元素)
display: inline-block(内联块元素)

块元素的表现为盒子的特性，使用margin:auto居中。

内联元素表为文本的特性：可以使用text-align:center文本居中。

定位

position

position : relative;	/*相对定位*/
position : absolute;	/*绝对定位*/
position : fixed;		/*固定定位*/

相对定位：表示这个div是一个相对参考线，内部的元素都会相对于它进行定位。

绝对定位：根据绝对的坐标进行定位移动，p点的坐标是根据外层的定位计算，如果没有就会一直往外查找直到使用浏览器作为坐标。

固定定位：固定定位是相对于整个页面进行定位。

层次选择器

后代：M N

父子：M > N

兄弟：M ~ N

相邻：M + N

CSS属性选择器

M[attr] ：M元素选择指定为attr属性的集合。

M[attr=value] ：M元素选择指定为attr属性和value值的集合。

M[attr*=value] ：M元素选择指定为attr属性并且包含值为value的集合。

M[attr^=value] ：M元素选择指定为attr属性并且起始值为value的集合。

M[attr$=value] ：M元素选择指定为attr属性并且结束值为value的集合。

M[attr1] [attr2] ：M元素选择满足多个属性的集合。

伪类选择器

a标签操作

:link 访问前的样式（只能添加给 a 标签）

:visited 访问后的样式（只能添加给 a 标签）

鼠标操作

:hover 鼠标移入时的样式（可以添加给所有标签）

:active 鼠标按下时的样式（可以添加给所有标签）

文本操作

:after 通过伪类的方式给元素 后 添加一些文本内容，使用content属性

:before 通过伪类的方式给元素 前 添加一些文本内容 content：""内容"

表单操作

:checked

:disabled

:focus