WEB前端CSS—CSS基础

最新推荐文章于 2024-08-25 09:44:09 发布

韦德曼

最新推荐文章于 2024-08-25 09:44:09 发布

阅读量106

点赞数

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/weideman/article/details/134678150

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

CSS三种写法

行内式(内联式)

<p style="color:pink; font-size:20px;">这是css样式段落</p>

内部样式

<head>
    <style>
        选择器：{属性:属性值}...
    </style>
</head>

外部样式(外联式)

<head>
    <link href="css文件路径" type="text/css" rel="stylesheet"/>
</head>

属性：link是单标签，一旦写了<link>，里面的3个属性都要写

href：css文件路径
type：文档类型，一般为"text/css"
rel：当前文件和css文件的关系，一般为"stylesheet"表示样式表文件

三种样式表比较

样式表	优点	缺点	使用情况	控制范围
内联	书写方便，权重高	未实现分离	最少	一个标签
内部	部分样式和结构分离	未彻底分离	较多	一个页面
外联	完全实现了分离	需要导入	最多	整个站点

CSS注释

/* 注释内容 */

CSS三大特性

层叠性

多种css样式的叠加
层叠性是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，这时一个属性会将另一个属性层叠掉。比如先给某个标签指定为red，接着又指定为blue，此时就是样式冲突。

权重相同下，样式冲突，遵循就近原则

样式不冲突，不会层叠

继承

书写css时，子标签会继承父标签的样式
恰当地使用继承，可降低css样式的复杂性
只继承部分样式，大部分是跟文本相关的，而height、width等不会继承

优先级(权重)

选择器	权重
通配符(*) / 继承	(0,0,0,0)
标签	(0,0,0,1)
类(伪类)	(0,0,1,0)
id	(0,1,0,0)
行内样式	(1,0,0,0)
`!important`	∞

权重可以叠加，如：
- div ul li：(0,0,0,3)
- .nav ul li：(0,0,1,2)
- a:hover：(0,0,1,1)
- .nav a：(0,0,1,1)
继承的权重为0，即使.dad是无穷大，遇到权重为1的标签选择器，还是执行自己的
继承的情况是只有一个选择器.dad的时候，而.dad div权重就不为0

显示模式

块级元素block

每个块元素通常都会独自占一行或多行，可以设置宽、高、对齐等属性，常用于网页布局和结构的搭建
常见的块元素有h1-h6、p、div、ul、ol、li等，其中div最典型(css+div布局)
特点：
- 总是从新的一行开始
- 宽高、内外边距都可控
- 宽度默认 = 容器的宽度
- 可容纳内联元素和其他块元素

行内(内联)元素inline

内联元素不占独自的区域，仅仅凭自身的字体大小和图像尺寸支撑结构，一般不可设置宽、高、对齐等属性，常用于控制页面中文本的样式
常见的有a、strong、b、em、i、del、s、ins、u、span等，其中span最典型
特点:
- 和相邻行内元素在一行上
- 宽高无效，但水平方向的padding和margin可以设置，垂直方向无效
- 默认宽度 = 本身容器的宽度
- 行内元素只能容纳文本或其他行内元素；但a标签特殊，a里不能再放a，但可以放其他块级元素
- 只有文字才能组成段落，因此p不能放块级元素；同理还有h1-h6、dt，它们都是文字类块级标签，里面不能放其他块级元素

行内块元素inline-block

在行内元素有几个特殊的标签img、input、td，可以对它们设置宽、高、对齐属性
特点：
- 和相邻行内元素(行内块)在一行上，但是之间有空白缝隙
- 默认宽度 = 它本身内容的宽度
- 高度、行高、内外边距都可控

转换

块 -> 行内：display: inline;
行内 -> 块：display: block;
块、行内 -> 行内块：display: inline-block;

盒子模型

border边框

border: border-width border-style border-color;

边框就是那层皮，类比橘子皮、西瓜皮…
border-style边框样式：
- none：无边框，默认
- solid：单实线
- dashed：虚线
- dotted：点线
- double：双实线
表格的细线边框-边框合并：table{border-collapse: collapse;}
圆角边框：border-radius: 50%;

padding内边距

边框和文本内容的距离
padding会撑开有width和height的盒子，所以设置盒子的宽高一定要减去两边内边距
实际中一般只设置padding的top和left，然后宽高只减去一边的就行

padding后面属性值的数量：

值个数	示例	意义
1	`padding: 3px;`	上下左右都是3px
2	`padding: 1px 2px;`	上下1px，左右2px
3	`padding: 1px 2px 3px;`	上1px，左右2px，下3px
4	`padding: 1px 2px 3px 4px;`	上1px，右2px，下3px，左4px

margin外边距

元素外部之间的距离
取值顺序参考padding
文字盒子居中：
- 文字水平居中：text-align: center;
- 盒子水平居中：margin: 0 auto;，条件：①必须是块级元素；②盒子指定了width

清除默认边距

*{
    padding: 0;
    margin: 0;
}

外边距合并

问题描述：使用margin定义块元素的垂直外边距时，可能出现外边距的合并

相邻块元素垂直外边距合并：当上下两个块元素相遇，若上边的元素有margin-bottom，下边的有margin-top，则他们之间的距离是两者的较大者而不是两者的和。【没办法解决，避免就好】
嵌套块元素的垂直外边距合并：两个嵌套的块元素，如果父元素无padding-top及border，则父元素的margin-top会与子元素的margin-top合并，值为两者中的较大者，即使父元素的margin-top为0也会合并
- 为父元素添加border-top: 1px;或padding-top: 1px;
- 为父元素添加overflow: hidden;

计算宽度和高度

计算:

外盒尺寸(元素空间尺寸)：宽 = width + padding + border + margin
内盒尺寸(元素实际大小)：宽 = width + padding + border

注意:

width和height仅适用于块级元素，对行内元素无效(img除外)
计算盒子模型的总高度时，应考虑垂直外边距合并的情况
如果盒子未指定weight/height，则padding不会影响本盒子大小

盒子模型布局稳定性

其实内外边距可以混用，用padding和margin都可以，哪个方便就用哪个。
但建议使用优先级如下：width > padding > margin，原因：
- margin：有外边距合并，而且IE6以下有bug
- padding：会影响盒子大小，需要进行width/height的加减计算
- width：这种最好

盒子阴影

box-shadow: h-shadow v-shadow [blur spread color inset];

常用盒子阴影：box-shadow: 0 15px 30px rgba(0,0,0,0.1);

属性：

属性	中文	描述	可选性
`h-shadow`	水平阴影	x方向阴影位置，允许负值	必须
`v-shadow`	垂直阴影	y方向垂直阴影位置，允许负值	必须
`blur`	模糊距离	模糊距离，越大越模糊	可选
`spread`	阴影尺寸	阴影尺寸、影子大小	可选
`color`	阴影颜色	阴影颜色	可选
`inset`	内/外阴影	默认外阴影`outset`，但不能写；想要内阴影`inset`	可选

浮动

普通流normal flow

普通流或标准流，实质上是一个网页内标签元素正常从上到下、从左到右排列顺序的意思。
例如，块级元素会独占一行，行内元素会按序前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫普通布局

浮动float

设置了float的元素会脱离普通的标准流控制，移动到其父元素中指定位置的过程
可以让div在一行内展示，而且没有缝隙，比display: inline-block好很多
属性值:
- none：不浮动，默认
- left：左浮动
- right：右浮动
注意:
- 浮动脱离标准流，脱标不占位置，会影响标准流
- 浮动只有左右之分
- 浮动首先创建包含块的概念(包裹)，即浮动的元素总是找离他最近的父级元素对齐，但不会超出padding的范围
- 浮动只会影响下面的盒子，上面的不影响。若只对最下面的盒子加浮动也不影响效果
- 浮动会让元素转换为行内块，使得盒子宽度=文字宽度
- 小妙用：如果给行内元素inline添加了浮动，此时不需要转换这个元素也可以有width和height
- 若3个块状盒子想要在一行，他们必须都要添加浮动才能在一行显示，要浮一起浮

清除浮动

属性：

为了解决父级元素因为子级浮动引起的内部高度为0的问题。若清除浮动，父亲会自动检测孩子的高度，以最高的为准将自身设置为此高度
语法：clear: 属性值;
属性值：
- left：不允许左侧有浮动元素，清除左侧浮动的影响
- right：不允许右侧有浮动元素，清除右侧浮动的影响
- both：清除左右两侧的影响，基本用这个

4种方式清除浮动:

额外标签法：在最后一个浮动元素末尾加一个空标签，如<div style="clear:both"></div>
- 优点：通俗易懂、简单方便。
- 缺点：添加无意义的标签，结构化差【多捞哦】
父级overflow法：通过BFC的方式，给父级添加overflow为hidden、auto、scroll
- 优点：代码简洁
- 缺点：内容增多时容易导致不自动换行，以致内容被覆盖，无法显示溢出的元素
after伪元素方法：
```
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;
}
```
- 优点：不用单独加标签，符合闭合浮动思想，结构化正确
- 缺点：IE6和7不支持:after，需要使用.clearfix{*zoom:1;}
- 代表：百度、淘宝、网易

before和after双伪元素法：

.clearfix:before, .clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom:1;
}

优点：代码简洁
缺点：IE6和7不支持:after，需要使用.clearfix{*zoom:1;}

浮动问题

结合QQTIM的nav的例子，如果标签放错位置并且都设置了float: right;那么它们的顺序会反了，要注意!

<div class="other">
<a href="#" class="register">注册</a>

定位

边偏移

边偏移属性	描述
top	顶端偏移量
bottom	底部偏移量
left	左侧偏移量
right	右侧偏移量

定位模式

语法：position: 属性值;

定位模式	描述	脱标	边偏移	移动的基准
`static`	静态定位，默认	不脱标，正常模式	不可用	正常
`relative`	相对定位，相对于其原文档流的位置定位	不脱标，占位	可用	自身位置
`absolute`	绝对定位，相对于上一个已定位的父元素定位	完全脱标且不占位	可用	有定位的父元素
`fixed`	固定定位，相对于浏览器窗口定位	完全脱标且不占位	可用	浏览器

静态定位(默认)

网页中所有的元素默认都是静态定位

相对定位(自恋型)

原来所占的位置，继续占有。即虽然移动，但还在原来的位置，下面的盒子不影响布局。
不脱标：每次移动的位置，以自己左上角为基准。即相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它
如果浮动的目的是让多个块级元素一行显示，那么定位的主要目的就是移动位置
相对定位会压住别的，在最顶层

绝对定位(拼爹型)

完全脱标：绝对定位不占位置，和浮动一样，会影响下面盒子
如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的一部分定位
若没父亲或所有的父级元素都没有定位，则以浏览器当前屏幕为基准对齐
若父元素有定位，则以最近的已定位的父元素为基准定位

固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形，以浏览器窗口作为基准来定义网页元素
完全脱标：脱离标准文档流的控制，始终依据浏览器窗口来定义自己展示的位置，跟父亲无任何关系，只认浏览器
不随滚动条滚动，也不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口的固定位置

IE6等低版本不支持

z-index

语法： z-index:属性值;
属性值： 无单位，数值越大，摆放越靠上
如果取值相同，按照顺序，后来者居上。
只有三种定位才有此属性，其余标准流、浮动、静态无该属性

最佳实践

子绝父相： 父元素relative，子元素absolute
绝对定位的盒子水平居中：一旦加了定位position或浮动float，那么盒子居中margin:0 auto;就会失效，方案：
```
left: 50%;
margin-left: 【负】盒子width的一半
```
定位模式转换：跟浮动一样，元素添加了absolute和fixed之后，元素都会转化为行内块模式。行内块的宽高和内容有关，因此如果行内元素添加了这两种定位，无需模式转换，直接给定高度和宽度即可。
设置了float、fixed、absolute，要想显示必须指定width:100%