【css学习】css基础学习知识点简单整理

本文链接：https://blog.youkuaiyun.com/SDUzzy/article/details/107673369

知识点
1、盒模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
例如

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

300px (宽)

50px (左 + 右填充)
50px (左 + 右边框)
50px (左 + 右边距)
= 450px
2、选择器
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
div>p 选择
元素中所有直接子元素
。
div+p 选择紧接在另一元素后的元素，且二者有相同父元素。
div~p 选取所有

元素之后的所有相邻兄弟元素
。
伪类
以anchor为例，伪类与css类配合使用
a.red:visited {color:#FF0000;}
CSS 语法
3、css尺寸
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
4、position
fixed：元素位置与文档流无关，不占用空间，可以层叠，用z-index控制在前或在后。
relative：移动相对定位元素，但原本占据的空间不会改变；通常用作absolute的容器块。
absolute：相对于最近的已定位的父元素，若没有已经定位的父元素，则相对于。绝对定位元素会被从正常流中删除，并且能够交叠元素。
sticky：粘性布局，当滚动到一定距离后，不再变化。
5、overflow
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
6、float
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，文本流将环绕在它左边
float的可选属性只有：left、right、inherit、none，而没有top、bottom

img
{
    float:right;
}

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。

.text_line
{
    clear:both;
}

7、伪类
CSS伪类是用来添加一些选择器的特殊效果。
所有伪类：菜鸟教程https://www.runoob.com/css/css-pseudo-classes.html
first-child 伪类：
p:first-child 匹配第一个

元素
p > i:first-child 匹配所有

元素中的第一个元素
p:first-child i 匹配所有作为第一个子元素的

元素中的所有元素
anchor 伪类：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

伪类和css类配合使用：

a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

8、伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
伪元素语法：

selector:pseudo-element {property:value;}

伪元素和类结合：

selector.class:pseudo-element {property:value;}

几个常用伪元素：
“first-line” 伪元素用于向文本的首行设置特殊样式。
“first-letter” 伪元素用于向文本的首字母设置特殊样式。
“:before” 伪元素可以在元素的内容前面插入新内容。
例如，在每个

元素前面插入一幅图片：

h1:before 
{
    content:url(smiley.gif);
}

所有伪元素见菜鸟教程https://www.runoob.com/css/css-pseudo-elements.html
9、属性选择器
具有特定属性的HTML元素样式不仅仅是class和id，如title

[title]
{
    color:blue;
}

具体案例
1、设置图片为背景

#back_ground{
background-image: url("地址");
}

2、去除链接下划线，即将anchor文本修饰设为none

a {
text-decoration:none;
}

3、控制p文本第一行缩进50px

p {
text-indent:50px;
}

4、要水平居中对齐一个元素(如

), 可以使用 margin: auto;。
5、左右对齐 - 使用 float 方式

.right {
    float: right;
}

6、左右对齐 - 使用 float 方式

.right {
    position: absolute;
    right: 0px
}

7、垂直居中对齐 - 使用 padding

.center {
    padding: 70px 0;
    text-align:center;
}

8、垂直居中 - 使用 line-height（行高）
让 line-height 属性值和 height 属性值相等来设置 div 元素居中（行高为整个块的高度，自然会居中）

.center {
    line-height: 200px;
    height: 200px;
    text-align: center;
}

【css学习】css基础学习 知识点简单整理

元素前面插入一幅图片：

【css学习】css基础学习知识点简单整理