菜鸟认识前端标签菜鸟认识前端标签

1、padding 内填充设置后会撑大容器大小，即大小为padding + 容器大小

padding复合值 padding:10px; //一个值：四个方向同大小,均为10pxpadding:10px 20px ; //两个值：上下同为10px，左右同为20px padding:10px 20px 30px ; //三个值：上为10px，下为20px，左右同为30px padding:10px 20px 30px 40px; //四个值：上10px，右20px，下30px，左40px（即顺时针方向）

2、margin 外边距：标签与标签之间的距离
复合值同padding
注意：父子级包含关系时，子级的margin-top会传递给父级
解决：给父级设置border可以解决
注意：两个div同时设置margin，会出现上下叠压问题
解决：可以将某一个元素设置成预想的值，会取最大的margin值，即
给div1或者div2设置具体的margin值
如果元素没有特殊特征，也可以用padding代替

#box{ background-color: red; border: 1px solid black; }#div1{ height: 100px; margin: 100px 100px 200px 100px; background-color: yellow; }#div2{ height: 100px; margin: 100px; background-color: blue; }

认识标签
1、盒模型
盒子大小：border+padding+width/height
盒子宽度：左border+左padding+width+右padding+右border
盒子高度：上border+上padding+width+下padding+下border
2、a 超链接
伪类：给元素添加特殊的效果

：link 未访问过连接的效果：visited 访问过后的连接颜色：hover鼠标移入（悬停）：ative 鼠标按下时连接颜色**顺序 lv ha**

3、CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。(详解点击链接如下)
https://blog.csdn.net/fengqingtao2008/article/details/52732862
4、span 同一行几个字包裹用以区分样式
decoration：none 去掉a标签自带的下滑线
5、head 用于页面信息介绍，也可用于板块头部
6、nav 导航栏（包含链接的一个列表）

7、footer 页脚页面底部或者板块底部
8、section 页面板块用于划分页面上的不同区域或者划分文章里不同节
9、article 用来在页面中表示一套结构完整且独立的内容部分
10、aside 包含当前与当前页面或主要内容相关内容的引用、侧边栏、广告、nav元素组，以及其他类似有别与主要内容的部分
11、time 用来表示时间或者日期
12、常见标签

h1-h6 标题 p段落 strong 强调粗体 me 情调斜体 span 区分样式 ul 无序列表 ol 有序列表 li 列表项 dl 定义列表 dt 定义列表标题 dd 定义列表项 mark 标记 img src 显示图片

13、css reset原则（不要使用默认样式,因为每个浏览器下标签的默认样式可能会初心不一致的情况，故需要人为默认样式清除，后重新设置）
需要重置的内容
与盒模型相关的样式

border margin padding

【菜鸟认识前端标签】标签特有的样式

ul>li ol>li

书写原则：
用到什么标签就清除所用的标签的默认样式，建议不要将所有的标签样式全部清除。

body,dl,dd,p,h1,h2,h3,h4,h5,h6,{margin:0; font-size:12px; } ol,ul{margin:0; padding:0,list-style:none; } a{text-decoration:none} img{border:none; }

14、通配符：找到页面上的所有元素，不建议使用
15、选择器
id 唯一
类选择器
标签选择器
群组选择器、包含选择器

div,p,h1{}、 .box div1{}

通配符 *
16、选择器优先级

style>id>class>类型选择器>*行间样式》id选择器》类选择器》标签选择器

包含选择器优先级计算
群组选择器优先级,可类比为：

行样式 1000 id选择器 100类选择器 10标签选择器 1.div div (10+1)div div (100 +100)

依据此法计算群组选择器
17、块元素特征
默认独占一行
没有宽度是，默认撑满一行
支持所有css命令
内联元素
同排可以继续跟同类的标签
内容撑开宽度
不支持宽高
不支持上下的margin
代码换行被解析
18、块元素和内联元素的转换
display:block 显示为块
使内联元素具备块元素的特性
display：inline 显示为内嵌
是行块属性标签具备内联元素的特性