CSS笔记

标签：定位行内盒子元素笔记边框选择器 CSS

选择器

基础选择器

基础选择器由单个选择器组成，基础选择器又包括 标签选择器、类选择器、id 选择器和通配符选择器

标签选择器，按照标签名称分类，例如：p
类选择器，按照类名分类，例如 .class
id 选择器，按照 id 名称分类，例如 #id
通配符选择器，选择所有的元素，例如 *

复合选择器

复合选择器建立在基础选择器之上，对基本选择器进行组合形成的

后代选择器

可以选择父选择器中的所有选择器，选择器之间用空格分开（选择所有的符合条件的子元素、孙子元素。。。）

/*选择所有 ol 下的 li*/
ol li {
    
}

子选择器

只能选择作为某元素的最近一级的子元素，简单理解就是亲儿子元素

/*选择 ol 下的亲 li*/
ol>li {
    
}

并集选择器

可以选择多组标签，并且同时为他们定义相同的样式，任何选择器都能作为并集选择器的一部分

/*选择所有的 div 和 p 和 ul*/
div, p, ul {
    
}

伪类选择器

链接伪类

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动的链接(鼠标按下未弹起)

:focus 焦点

:focus 伪类用于选取获得焦点的表单元素

CSS 字体属性

文字字体

font-family: 'serif', 'Ayuthaya';

从前往后依次进行匹配，如果电脑上没有前面的字体，依次往后进行匹配

文字大小

默认是 16px

font-size: 22px;

字体粗细

font-weight 可选值：

normal 正常字体
blod 粗体，相当于 strong 标签
bolder 特粗体
lighter 细体

可以用数字进行代替，数字从 100~900

400 相当于 normal

700 相当于 blod

font-weight: bold;

字体样式

font-style 可选值：

italic 斜体
normal 无样式 可以让斜体 em 标签变得不斜

font-style: normal;

字体属性复合写法

/*font: font-style, font-weight, font-size, font-family*/
font: normal 700 20px 'Ayuthaya';

CSS 文本属性

文本颜色

color: rebeccapurple;

或者

color: rgb(80, 10, 10);

或者

color: #cc00ff;

或者

/*最后一个值是透明度，取值为 0 到 1*/
color: rgba(80, 80, 80, 0.1);

水平对齐文本

可取值：

left
right
center

text-align: center;

文本下划线、删除线、上划线

/*没有装饰线*/
text-decoration: none;
/*下划线*/
text-decoration: underline;
/*上划线*/
text-decoration: overline;
/*删除线*/
text-decoration: line-through;

文本缩进

只会缩进首行

/*缩进 10 个像素点*/
text-ident: 10px;
/*当前元素两个文字大小*/
text-indent: 2em;

文字阴影

text-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影颜色;

行间距

文字的行间距由三部分构成：上间距、文本高度、下间距

如果定义的行间距大于文本的高度，那么上下间距平分剩余的告诉

line-height: 20px;

元素的显示模式

HTML 标签一般分为 块元素 和 行内元素

块级元素特点：

独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是父级宽度的 100%
块级元素里面可以放行内块或者块级元素

行内元素特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或者其他行内元素

特殊元素：行内块元素

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个行内块元素
默认宽度就是它本身的宽度
高度、宽度、外边距以及内边距都可以控制

元素显示模式转换

转块级元素：

display: block;

转行内元素：

display:inline;

转行内块元素：

display: inline-block;

单行文字垂直居中

原理：行高=上空隙+文字高度+下空隙，如果文字的行高和盒子的高度相同，那么文字就是显示的垂直居中

line-height: 盒子高度px;

CSS 背景

背景颜色

/*默认是transparent，也就是透明的，可以设置颜色(rgb值，颜色名称，十六进制颜色)*/
background-color: transparent;

背景图片

Logo 或者超大图片或者小图片一般使用背景图片来做，因为位置比较好控制(精灵图)

背景图片地址

background-image: 设置背景图片地址

background-image: url("./images/pic.jpeg"); /*设置背景图片*/

背景图片平铺模式

background-repeat：设置背景图片的平铺模式

repeat: 平铺
no-repeat: 不平铺
repeat-x: x 轴平铺
repeat-y: y 轴平铺

background-repeat: no-repeat; /*设置平铺模式*/

背景图片位置

background-position：设置背景图片的位置

background-position: x y;

x 轴坐标和 y 轴坐标，可以使用 方位名词 或者 精确单位

方位名次：

top
center
bottom
left
center
right

背景图像固定(背景附着)

background-attachment：设置背景图像是否固定或者随页面的其余部分滚动

scroll: 背景图像岁对象内容滚动
fixed: 背景图像固定

背景复合写法

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

background: transparent url("./images/icon.png")  no-repeat  left center;

CSS 三大特性

层叠性

层叠性主要是解决样式冲突：后设置的属性会被使用，后来者居上

继承性

子元素会继承父元素的样式

优先级

选择器	权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!import	无穷大

计算方式：各个位置相加，不会有进位问题

CSS 盒子模型

盒子模型组成部分

一个盒子由：边框、外边距、内边距和实际内容构成

分别对应：

border：边框
margin：外边距
padding：内边距
content：实际内容

边框

边框由三部分组成：边框的粗细、边框的样式和边框的颜色

border-width：边框的粗细，单位是 px
border-style：边框的样式
- solid：实线边框
- dashed：虚线边框
- dotted：点线边框
border-color：边框的颜色

上面的三个内容可以缩写为：border: border-style border-width border-color

border: solid 5px red;

圆角边框

      border-radius: 50%; /*圆*/
      border-radius: 40px; /*圆角矩形*/

border-radius 等于盒子的高度的时候就变成了圆角矩形

盒子阴影

语法：box-shadow: 水平阴影位置垂直阴影位置模糊距离阴影的尺寸阴影的颜色内部阴影||外部阴影

/*内部阴影需要加一个 inset, 外部阴影不需要加参数*/
box-shadow: 10px 10px 10px 2px #555555;

合并相邻边框

border-collapse: collapse;

内边距

内边距就是盒子和内容之间的距离

padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距

上面四个部分可以缩写为：padding: top right bottom left

如果只写两个值，那么分别为上下和左右

如果只写一个值，那么上下左右都是同一个值

外边距

外边距用来控制盒子和盒子之间的距离

margin-left：左外边距
margin-right：右外边距
margin-top：上外边距
margin-bottom：下外边距

上面四个部分简写和内边距相同

块级盒子水平居中

只要将左右外边距设置成 auto 就会自动水平居中

只要保证左右 margin 为 auto 就可以了

margin: 0 auto;

行内元素或行内块元素水平居中

行内元素或者行内块元素水平居中只需要给其父元素添加 text-align:center; 即可

解决盒子嵌套时塌陷问题

问题描述：当两个盒子同时设置上外边距的时候，这时候按照的是谁的外边距大就按照谁的 margin 进行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: orange;
            margin-top: 40px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin-top: 40px; /*这里设置没反应，因为出现了盒子塌陷问题*/
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

这样就造成了一个问题：内部盒子怎么才能距离外部盒子有个距离呢？

有三种解决方案：

为父元素定义上边框
为父元素定义上内边距
为父元素添加 overflow:hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: orange;
            margin-top: 40px;
            /*border: 1px solid transparent; !*第一种解决方案*!*/
            /*padding-top: 1px; !*第二种解决方案*!*/
            overflow: hidden; /*第三种解决方案*/
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin-top: 40px; /*这里设置没反应，因为出现了盒子塌陷问题*/
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

盒子浮动

多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动

float 属性用来创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘

float: left|right

浮动特性

浮动元素会脱离标准流，浮动的盒子不再保留原来的位置
浮动元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块的特性

清除浮动

父元素里面的元素全部浮动的话，父元素的高度就会变成 0，如果父元素后面再来一个盒子，就会直接顶上去，会被盖在浮动元素下面

理想状态下，子盒子应该撑开父盒子

清除浮动的本质就是清除浮动元素造成的影响，清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流

清除浮动的方法：

额外标签法（隔墙法）-在最后一个浮动的元素后面添加一个盒子，并且添加 clear: both;
父级元素添加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll
父级添加 after 伪元素，
父级添加双伪元素

    /*第三种方法*/
    nav:after {
      content: ''; /*伪元素里面的内容*/
      display: block; /*转换为块元素*/
      clear: both; /*清除浮动*/
      visibility: hidden; /*不显示伪元素*/
    }

/*第四种方法*/
nav:before, nav:after {
  content: "";
  display: table; /*转换为表格*/
  clear: both;
}

CSS 属性书写顺序

布局定位属性（display，float等）
自身属性（宽度，高度等）
文本属性（颜色，字体大小等）
其他属性（阴影，背景图片等）

定位

定位的组成

定位=定位模式+边偏移

定位模式通过 position 属性来设置，其值分为4个：

static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位

边偏移就是将盒子移动到最终位置，有 top、bottom、left 和 right 4个属性

静态定位

静态定位是元素的默认定位方式，无定位的意思，静态定位没有边偏移

相对定位

相对定位是元素移动位置的时候，是相对于它原来的位置来说的

即使位置变了，但是原来的位置依然会占有

position: relative;

绝对定位

绝对定位是元素在移动的时候，是相对于它的祖先元素来说的

如果没有祖先元素，或者祖先元素没有定位，则以浏览器为准定位（Document 文档）
如果祖先元素有定位，则以祖先元素为准定位
绝对定位不再占有原来的位置，会脱离标准流

固定定位

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

以浏览器的可视窗口为准
跟父元素没有任何关系
不随滚动条的滚动而滚动

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合，粘性定位的特点：

以浏览器的可视窗口为参照点移动元素
粘性定位占有原来的位置
必须添加 top、left、right、bottom 其中至少一个才有效

定位的叠放顺序

z-index 可以设置盒子的前后顺序，值越大盒子越靠上

元素的显示与隐藏

第一种方式：display

display: none; 隐藏元素，隐藏后不再占有原来的位置

display: block 显示元素

第二种方式：visibility

visibility 属性有 4 个值：

inherit：继承上一个父元素的可见性
visible：元素可见
hidden：元素隐藏，隐藏后会占有原来的位置
collapse：主要用来隐藏表格的行或列，对于表格外的其他元素等同于 hidden 值

第三种方式：overflow

overflow 属性有 4 个值：

visible：不剪切内容也不添加滚动条，直接显示
auto：在需要时剪切内容并添加滚动条
hidden：超出部分直接隐藏
scroll：总是显示滚动条

行内块垂直居中对齐

让图片和文字垂直居中

   img {
       vertical-align: middle;
   }

文字溢出省略号显示

单行文本溢出显示省略号：

先强制一行内显示文本 white-spage: nowrap;
超出部分隐藏 overflow: hidden;
文字用省略号替代超出的部分 text-overflow: ellipsis;

多行文本溢出显示省略号：

隐藏溢出部分 overflow: hidden;
文字用省略号替代超出的部分 text-overflow: ellipsis;
弹性伸缩盒子模型显示 display: -webkit-box;
限制在一个块元素显示的文本的行数 -webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式 -webkit-box-orient: vertical;

标签：定位,行内,盒子,元素,笔记,边框,选择器,CSS
From： https://www.cnblogs.com/deramcode/p/17072851.html

选择器