选择器
选择器用于指定网页上我们想要样式化的HTML元素css 颜色选择器,例如H1元素和class元素。特殊
选择器列表
单独的规则
h1 {
color: red;
}
.special {
color: blue;
}
组合规则
h1, .special {
color: red;
}
如果任何选择器无效,则整个规则将被忽略。
选择器的类型
类型、类和 ID 选择器:“标签名称选择器”或“元素选择器”,选择 HTML 标签/元素
ID选择器:ID选择器以#而不是句点开头
全局选择器:用星号 * 表示
* {
margin: 0;
}
类选择器:类选择器以句点开头。
包袋模型
所有元素都被“盒子”包围
块级袋
包将沿内联方向扩展并占据父容器在该方向上的所有可用空间,这在大多数情况下意味着包将与父容器一样宽
每个袋子都会包裹
宽度和高度属性可以发挥作用
内边距、边距和边框会将其他元素“推”离当前包。
除非另有说明,例如标题
和段落默认是块级包
微信搜索:伊洛的小屋title>head>这是一段优美的文字p>
- 文字1li>
- 文字2li>
- 文字3li>ul>
这是另外的一段 非常span> 优美的 文字span>啊p>body>html>
CSS渲染
p,
ul {
border: 2px solid rebeccapurple;
padding: .5em;
}
.block,
li {
border: 2px solid blue;
padding: .5em;
}
ul {
display: flex;
list-style: none;
}
.block {
display: block;
}
第一个是CSS中带有边框的段落。浏览器将其渲染为块级包,因此段落从新行开始并填充一行长度
第二个是列表css 颜色选择器,布局属性为display:flex。将在容器内部构建一个flex布局
CSS 盒子模型
袋子模型结构
外距离
所有元素的行距都由margin控制
上边距、右边距、下边距、左边距
框架
使用border属性设置四个边框的长度、颜色、样式
设置每条边的长度、颜色和样式
内间距
使用 padding 来控制元素的所有侧面,或单独在每一侧使用等效的通用属性
发表评论