前端学习的第3天（8.16）

前端学习的第3天（8.16）

一、元素内容溢出
1.当元素固定宽高，宽高就不再根据内容撑开，如果内容的宽高超出元素本身的宽高，超出元素的内容仍会显示
2.overflow，设置元素溢出内容的显示方式，默认为显示
3.hidden 元素溢出内容部分隐藏不显示
scroll 表示溢出的内容可以滚动浏览（overflow: scroll;）
4. overflow-x x轴溢出内容处理方式、overflow-y y轴溢出内容处理方式
（overflow-x: hidden、overflow-y）

二、伪类选择器、伪元素选择器
（1）在一个选择器之后通过:添加伪类，伪类是在一定条件下才能触发的样式
1.hover 当鼠标指针在元素上悬停时触发
例：#link:hover{
text-decoration: underline;
background-color: yellow;
}
2.visited a标签专用的 表示访问过的元素
例：#link:visited{
color: gray;
}
3.focus伪类 当元素成为焦点时触发
用户可以交互的元素才能处于焦点状态，一个页面中同时只能有一个元素成为焦点状态
例：#field:focus{
width: 300px;
}
4.active当元素被鼠标按下时触发
例：#txt:active{
font-size: 20px;
background-color: cyan;
}
（2）文本选择器
#p1{text-indent: 2em;}
/* first-letter 元素内容中的第一个字 /
#p1:first-letter{font-size: 40px;}
/ first-line 元素内容中第一行 */
#p1:first-line{color: red;}
（3）伪元素
1.before 前缀伪元素，为元素内容添加一个前缀
例：#p2:before{content: “￥”;color: red;font-size: 16px；}
2.after 后缀伪元素，为元素内容添加一个后缀
例： #p2:after{content: “元”;color: red;font-size: 16px;}

三、背景图片
background-image 设置元素的背景图片
url 同意资源定位符
例：background-image: url(bg.jpg);
1.如果图片太小，填充不满标签内部，会复制几张直到填满为止
background-repeat 设置背景图片是否重复显示，默认为重复显示，no-repeat 不重复显示
2.背景图片固定 ，不随着内容滚动而滚动
background-attachment: fixed;
3.背景图片默认显示的大小是图片原始尺寸，如果背景图片尺寸大于元素尺寸，则只能显示图片的一部分(左上角）
4.background-position 设置背景图片横向和纵向的位置，默认为0和0
5.cover 较短的一边平铺，另一边等比例缩放，contain 较长的一边平铺，另一边等比例缩放
background-size: cover、background-size: contain

四、边框和圆角
1.border，用于设置标签的边框，需要设置边框样式，线宽和颜色
2.border-color 边框颜色
3.border-width 边框线宽（solid 实线 dashed 虚线 dotted点线 double 双实线）
4.border 复合样式 四边边框 可以同时设置边框颜色、线宽、样式、可以单独设置某一边边框、
例： border: black 2px solid;
5. border-radius 设置边框圆角半径、也可以单独设置某个角为圆角
例：border-top-left-radius: 10px; border-top-right-radius: 20px;
border-bottom-left-radius: 30px;border-bottom-right-radius: 40px;
6.圆角仅仅设置边框和背景为原型，实际上元素内容还是原来的正方形
解决方法：
overflow: hidden;
text-align: center;
line-height: 100px;

五、元素盒模型
1.标签元素从里到外分为四个部分：内容盒子(content-box) , 内间距盒子(padding-box), 边框盒子(border-box), 外边距盒子(margin)
2.默认情况下给标签设置的宽高指内容盒子(content-box)的宽高,不包含内边距和边框的
3.content-box 默认值，计算宽度高度时按照内容盒子进行计算，可以设置为border-box，表示计算宽高时，以边框盒子计算

六、外边距重叠问题
1.两个标签外边距产生重叠，优先保留最大值
2.子标签设置外边距不会和父标签相邻标签的外边距产生冲突

七、浮动布局
1.浮动 float 设置元素使用浮动布局，浮动有左浮动和右浮动
2.元素浮动之后，会脱离原有的文档流，参与浮动文档流,在浮动文档流中块元素也是横排布局，宽度也不再是100%
3.使用浮动布局，必须在最后一个元素结束的地方清除浮动，否则会影响后续标签的布局，也会导致父元素不能根据内容显示高度
清除浮动的方法：
1.最基本的清除浮动的方法，是在最后一个元素的后边添加一个元素，设置这个元素的clear为both
例：.clear{clear:both;}---------最后一个元素后面+div class=“clear”></div
2.在不添加新元素的情况清除浮动,浮动的元素，都会有一个共同的父元素，可以给父元素添加一个后缀伪元素，在后缀中清除浮动
一般情况都会将清除浮动的样式写成一个class(clear-fix)，哪个元素需要清除子元素的浮动，就给哪个标签添加这个class
例：.clear-fix:after{content: “”;display: block;clear: both;}
后面标签加上class 如：<ul id=“list” class=“clear-fix”

鼠标样式：cursor: pointer;

八、长度单位
1.px 表示像素 1px相当于屏幕上一个最小的显示单元
2.em表示当前元素的父元素的字体大小
3.rem表示根元素(html)的字体大小
4.1vw表示浏览器窗口宽度的1%
5.1vh表示浏览器窗口高度的1%
6.cm(厘米),mm(毫米),pt(磅)