1. css 学习笔记
1.1. padding, margin
padding: 内边距
margin: 外边距
一个元素的盒模型由四个部分组成 (在矩形图示中, 开发者工具以四种不同的颜色分别表示这四个部分)。
颜色 | 内容 |
---|---|
内容 (蓝色) | 可见内容, 就是文本 |
内边距 (绿色) | 内容四周透明的部分 |
边框 (黄色) | 可将环绕内容和内边距的部分设置为可见 |
外边距 (桃红色) | 边框之外的透明部分 |
1.2. sample 1
.thumbnail-title {
display: block;
margin: 0;
padding: 4px 10px;
background: rgb(96, 125, 139);
color: rgb(202, 238, 255);
}
display: block 声明更改了所有类名为. thumbnail-title 的元素的盒子, 使这些元素可以占据包含它们的元素的完整宽度。
1.3. 选择器优先级
- IDs
- Classes, attributes and pseudo-classes(伪类选择符)
- Elements and pseudo-elements
最好不用 ID 选择器。在文档中, ID 值是唯一的。尽管 ID 选择器优先级最高, 但与其相关的样式难以复用, 进而成为代码维护中的 “最糟实践”。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
元素之盒子模型
盒子模型就是把HTML中的布局元素看做一个矩形盒子,就是可以盛装内容的容器,标准的盒子模型:
特点:
盒子模型由元素的内容content、边框border、内边距padding、外边距margin组成
盒子模型的厚度我们称为边框
盒子模型的内容与边框的距离为内边距
盒子与盒子之间的距离叫外边距
-
内容content
内容区域:用来存放文字、图片、标签 -
内边距 padding
设置内边距:内容与边框的距离
padding-left : 10px
padding-top : 10px
padding-right : 10px
padding-bottom : 10px
padding : 4(上 右 下 左) 3(上 左右 下) 2(上下 左右) 1(上下左右)当我们给盒子指定padding之后,发生2件事情:
1.盒子变大
2.内容和边框之间有距离了 -
边框 border
border-width 边框宽度
border-style :solid实线 dashed虚线 dotted点线 none没有边框 (边框样式)
border-color : 边框颜色 默认颜色为黑色
border : 边框宽度 边框样式 边框颜色; -
外边距 margin
设置外边距:盒子与盒子的距离
margin-left : 10px
margin-top : 10px
margin-right : 10px
margin-bottom : 10px
margin : 4个值(上 右 下 左)3个值(上 左右 下) 2个值(上下 左右) 1个值(上下左右)