day02
-
- 表单
- css样式
- 选择器
- BUG
- 浮动
表单
css样式
1.第一种是直接在标签里写样式 （行内样式）
优点：简单，写起来方便
缺点：html与样式全部在一起，html代码比较臃肿，可读性比较差
适用于简单写几行
2.在头文件里去写style 样式 :
1. 有点：实现了html 与样式的分离,当前界面都可以进行共用
2.其它界面用不了
-
外部引入的步骤：
1. 新建一个文件夹
2. 新建一个css样式
3. 都是属性名: 属性值 (也就是键值对)
4.导入: @import url(css/index.css); 注意点：必须写在style 里
选择器
css 有三种基本选择器: 1.标签选择器 2. id选择器 3 .class 选择器
三种引入方式的优先级 行内>头文件里去写style 样式>外部引入( 头文件里去写style 样式 与外部引有先后顺序,后面会覆盖前面)
三种选择器的优先级 id选择器>类选择器>标签选择器
复合选择器
群组选择器 th,td{} 给不同选择器写相同样式
后代选择器 .box1 .box2{} 子孙后代都可以
子代选择器 .father>.son{} 直接子元素 孙子都不行
交集选择器 div.active{} 同时满足 是div标签，并且有class名为active
a标签的伪类链接选择器
a:link{} 未访问状态
a:visited{} 访问后
a:hover{} 鼠标移入
a:active{} 鼠标点击
BUG
margin外边距塌陷问题。
（1）给第一个子元素加margin-top，子元素会拖着父元素一起向下运动
方法：给父类加padding-top
（2）兄弟关系：
给上面元素加margin-bottom，下面元素加margin-top；两个margin会重合
方法：只写一个margin；
浮动
元素脱离文档流，按照指定的方向发生移动，遇到父元素边缘，或者其他浮动元素停下来
float：left|right|none
浮动元素特点
1. 脱离文档流
2. 层级提升
3. 在同一行显示
4. 可以设置宽高和margin、padding
5. 如果不设置宽高，宽高由内容撑开
浮动产生的问题：子元素浮动，脱离文档流，无法支撑父元素的高度，影响布局
清除浮动：
1.给父类加高度
2.给父类加overflow：hidden/auto/scroll
3.在浮动元素的最后加一个空的元素块，clear：both
4.写一个公共的类名：