180707 CSS

最新推荐文章于 2024-03-28 17:22:16 发布

simpleone_

最新推荐文章于 2024-03-28 17:22:16 发布

阅读量312

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/simpleone_/article/details/80950858

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

概述

什么是CSS？

层叠样式表 (Cascading Style Sheets)
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率

层叠次序

浏览器缺省设置
外部样式表
内部样式表（位于标签内部）
内联样式（在 HTML 元素内部）

CSS语法

大小写不敏感（选择器除外）
以@开头成为规则
选择器：{声名}
声名：属性/值

selector {declaration1; declaration2; ... declarationN }

{declaration -> property:value}

这里写图片描述

选择器

类选择器.class
ID选择器#id
通配符选择器*
标签选择器element
群组选择器selector1，selector2 同时选择满足两个条件的元素
后代选择器selector1 selector2 选择 selector1内部的全部selector2元素
父子选择器father>selector选择父元素为father的子元素selector
E[attribute^=value]属性值以value开头a标签div[class^='demo']
E[attribute$=value]属性值以value结尾a标签
E[attribute*=value]属性值包含value的a标签

这里写图片描述

选择器权重
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
这里写图片描述

伪类(Pseudo-classes)，伪元素(Pseudo-elements)

CSS伪类是用来添加一些选择器的特殊效果。

selector:pseudo-class {property:value;}

div:not([class="demo"]){
    color:green;
}

这里写图片描述

CSS 伪元素用于向某些选择器设置特殊效果。

selector:pseudo-element {property:value;}

div[class^='demo']::after{
    content：'aaa'
}

这里写图片描述

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

行级元素，块级元素，行级块元素

这里写图片描述
行级元素（inline）【内联元素/行内元素】

设置宽高无效内联元素的宽高随元素的内容而变化，能够影响它宽高的为其本身的内容。
- 行级元素绝对定位后可以设置width和height，这是由于display,position和float属性都能影响元素的显示及其位置，它们之间会相互影响。此处display在内联元素绝对定位后被重新计算，也就是说内联元素绝对定位后变成了块级元素。
- 行内替换元素一般有内在尺寸（替换元素比较特殊），所以具有width和height，可以设定。
设置margin和padding水平方向上有效
设置margin在垂直方向上无效，设置padding相当于改变背景在显示效果上是改变的，实际上是不变的，对周围元素没有影响
不会自动进行换行
常见的行内元素有：a , br , i , img , input , span , sub , sup

块级元素（block）

能够设置宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起，默认排列方式为从上至下
常见的块级元素有：address , div , form , h1, hr , ol , p , table , ul , li

行级块元素（inline-block）

不能自动换行
能够识别宽高
默认排列方式为从左到右

通过 display：inline / block / inline-block转换
更多内容

内联元素line-height

在CSS中，middle指的是基线往上1/2 x-height 高度。
尺寸单位ex，相对单位，指的是小写字母x的高度x-height。
内联元素默认是基线对齐，而基线是x的底部，1ex就是一个x的高度。
可以用于垂直居中。e’x单位不受字体和字号影响。

对于非替换元素的纯内联元素，其可视高度完全由line-height决定。

vertical-align

数值/百分比：20px，2em，20%。（vertical-align默认值是基线，数值是参照基线的偏移量。）
线类：baseline，top，middle，bottom
文本类：text-top，text-bottom

作用的前提条件：只能应用于内联元素。计算值为内联元素。如果改变了元素的display属性的计算值（float和定位），导致属性无效。

替换元素和非替换元素

– 根据元素内容是否可替换划分。
– 常见替换元素：img，object，video，iframe，text area，input，select
– 替换元素的特点：

样式表现在CSS作用域之外。内容的外观不受页面上的CSS的影响。
有自己的尺寸：在没有明确尺寸设定的情况下，其默认的尺寸是300*150。如video，iframe，canvas。
诠释新规则，在很多CSS属性上有自己的一套表现规则：如vertical-align属性，对于替换元素默认值是下边缘，对于非替换元素是基线。

盒模型(Box Model)

什么是CSS盒模型

盒模型，顾名思义，就是一个盒子。生活中的盒子，有长宽高，盒子本身也有厚度，可以用来装东西。页面上的盒模型我们可以理解为，从盒子顶部俯视所得的一个平面图，盒子里装的东西，相当于盒模型的内容（content）；东西与盒子之间的空隙，理解为盒模型的内边距（padding）；盒子本身的厚度，就是盒模型的边框（border）；盒子外与其他盒子之间的间隔，就是盒子的外边距（margin）。

元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。
这里写图片描述

IE盒模型和W3C盒模型

CSS盒模型分为IE盒模型和W3C盒模型。其实，IE盒模型是怪异模式（Quirks Mode）下的盒模型，而W3C盒模型是标准模式（Standards Mode）下的盒模型。

IE6及其更高的版本，还有现在所有标准的浏览器都遵循的是W3C盒模型，IE6以下版本的浏览器遵循的是IE盒模型。
这里写图片描述

这里写图片描述

从上图直观的可以看出，IE盒模型的宽度或者高度计算方式为：width/height = content + padding + border，W3C盒模型的宽度或者高度计算方式为：width/height = content。

CSS3属性：box-sizing

box-sizing: content-box[W3C] | border-box[IE] | inherit

`内边距padding`

padding：长度值|百分比。无论竖直方向还是水平方向，百分数值是相对于其父元素的 width 计算的。
padding区域也有颜色：background-color将填充所有boder以内的区域。
一些元素，默认带有padding：列表，表单元素。
不能设置负值。

padding有四个方向，小属性写法：

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

padding:30px 20px 40px 100px;

如果写了三个值，相当于上，左右，下。

padding: 30px 20px 30px;

如果只写了两个值：

padding: 30px 40px;

相当于：

30px 40px 30px 40px;

这里写图片描述

外边距`margin`

margin：长度值|百分比|auto

margin：auto的作用机制：

有时候元素没有设置width和height，也会自动填充或者自动填充对应的方位。

<div></div>               div宽度自动填满容器

div{
    position:absolute;
    left:0;right:0;
}                        div宽度自动填满包含块容器

如果宽度被限制，小于父级容器宽度，则此时margin：auto就是为了填充这个闲置尺寸而设计的。
其填充规则如下：
- 如果一侧定值，一侧auto，则auto为剩余空间大小。
- 如果两侧均是auto，则平分剩余空间。

可以利用margin：auto设置右对齐效果：

div{
    width:200px;
    margin-left:auto;
}                     子元素宽度小于容器，右边距缺失，左边距auto计算值为剩余空间大小。

利用margin：auto设置居中对齐：

div{
    width:200px;
    margin-right:auto;
    margin-left:auto;
}

为什么元素和容器都定高，margin：auto却无法垂直居中？

因为height无法自动填充。

 #demo{
    width: 300px;
    height: 150px;
    position: relative;
}
#demo1{
    position: absolute;
    top: 0;right: 0;bottom: 0;left: 0;
}

此时这个元素的尺寸表现为“格式化宽度和格式化高度”，和div的正常流宽度一样，都属于外部尺寸，尺寸会自动填充父级元素的可用尺寸。

#demo{
     position:absolute;
     top:0;right:0;bottom:0;right:0;
     width:200px;height:100px;
     margin:auto;
}

此时宽高被限制，原本应该填充的空间就被空余了出来，多余的空间就是margin：auto计算的空间。

`边框border`

border是一个大综合属性：

按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
按方向拆开：border-top、border-right、border-bottom、border-left。
不支持百分比。

—– border-style：solid、dashed、dotted

用border画一个三角形：

width:0px;
height:0px;
border:50px solid white;
border-top-color:red;
border-bottom:none;

CSS盒模型详解（图文教程）
CSS盒模型（Box Model）

理解模型：容器盒子，外在盒子

这里写图片描述

内联盒模型

这里写图片描述

空白节点（Sturt）

存在于每个行框盒子前面。

值复制

这里写图片描述
一个值时，表示top值。left同right，right同top，bottom同top。
输入两个值时，表示top，right值。left同right，bottom同top。
输入三个值时，表示top，right，bottom值，left同right。

定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

标准文档流的特性

文档流中的流实际上是css世界中的一种基本的定位和布局机制，引导元素排列和定位的一条看不见的水流。

（1）空白折叠现象：无论多少个空格、换行、tab，都会折叠为一个空格。
（2）高度不同的元素，底边对齐。
（3）自动换行。

标准流里面的限制非常多，导致很多页面效果无法实现。因此有时候需要脱离文本流。

包含块

什么是包含块？
元素用来计算和定位的一个框。

根元素（大多数场景下为html）被称为初始包含块，其尺寸等同于浏览器可视窗口的大小。
对于其它元素，如果该元素的position是relative或者static，则包含块是其最近的块容器祖先盒的content box边界形成。
如果元素position：fixed，则包含块是初始包含块。
如果元素position：absolute，则包含块由最近的position不为static的祖先元素建立。
- 内联元素也可以作为包含块所在的元素
- 包含块所在的元素不是父块级元素，而是最近的position不为static的祖先元素。
- 边界是padding box而不是content box。

相对定位，绝对定位，固定定位

CSS position 属性：

static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative：生成相对定位的元素，相对于其正常位置进行定位。
absolute：生成绝对定位的元素，元素从文档流删除，并相对于包含块定位。（相对于有定位的（position值不是static）第一个父元素进行定位。）元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。元素定位后生成一个块级框。
- absolute是非常独立的CSS属性值，其样式盒行为表现不依赖其它任何CSS属性就可以完成。
- absolute的流体特性：在【对立方向同时发生定位的时候】具有流体特性。

.box{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
}

这里写图片描述

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，不随文档滚动而移动。脱离文档流，原本空间关闭。元素定位后生成一个块级框。

CSS 偏移 属性

top/bottom
right/left

CSS z-index 属性

设置元素的堆叠顺序。
z-index:number[0~+]

CSS overflow 属性

规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

CSS vertical-align 属性

CSS visibility 属性

规定元素是否可见，不可见元素也会占据页面上的空间。
visible 默认值。元素是可见的。
hidden 元素是不可见的。

CSS display 属性

规定元素应该生成的框的类型。
none 此元素不会被显示，不会占据页面空间。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）

浮动float

CSS float 属性：

包裹性
- 包裹：浮动元素包裹子元素，即获得子元素宽。
- 自适应性：适应父元素宽度。距离浮动元素最近的块级祖先元素是它的包含块。
块状化并格式化上下文
- 浮动元素会生成一个块级框，不管它本身是什么。（display计算值就是block或table。）

span{
    display:block;    //多余
    float:left;
}
span{
    float:left;
    vertical-align:middle;  //多余
}

破坏文档流，即使从文档流中脱离（p标签文字环绕）
没有任何margin合并

浮动带来的问题

父元素高度塌陷：无浮动父元素的高度无法被撑开。

float属性让父元素高度塌陷的原因是为了实现文字环绕。实现文字环绕还有一个条件，是“行框盒子和浮动元素的不可重叠性”。即行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在征程定位状态下只会跟随浮动元素，而不会发生重叠。

文字环绕效果由父级高度塌陷和行框盒子区域限制共同作用产生。

浮动元素前，同级非浮动inline元素：当行内元素被撑起的宽度加上浮动元素的宽度，大于父元素的宽度时，浮动元素，就会下移一个line-height，直到计算的值小于父元素的宽度时，浮动元素会跟随其后。
浮动元素前，同级非浮动block元素：浮动元素会在块内元素下一行进行浮动。
浮动元素后，同级非浮动元素：无论是行内元素，还是块内元素，都会紧随浮动元素之后，也就是说同一水平的line boxes都被压缩了，这也是文字环绕图片的原因。line boxes受到压缩，但是不影响元素定位。

清除浮动影响

`clear抵抗浮动`

clear：none | left | right | both
注意clear官方解释：元素盒子的边不能和前面的浮动元素相邻。
只对块级元素有效。
clear作用的本质是让自己不和float元素在一行显示，并不是真正意义上的清除浮动。

理解浮动以及解决浮动带来的问题
 CSS样式—-浮动（图文详解）

元素尺寸[外部尺寸，内部尺寸]

尺寸分为内部尺寸和外部尺寸。
内部尺寸：元素尺寸由内部元素决定。
外部尺寸：元素尺寸有外部元素决定。

`width`

当width：auto时，对于不同元素产生的效果：

fill-available充分利用可用空间：div，p默认宽度是100%于父级元素。
shrink-to-fit包裹性：代表元素是浮动，绝对定位，inline-block元素。fit-content
min-content收缩到最小：table-layout：auto。汉字每一个字独占一行，变成一柱擎天。
max-content超出容器限制：
- 内容很长的英文或数字
- 内元素被设置了white-space：nowrap

宽度分离原则：width属性不与padding/margin/border同时出现。利用流动性在元素内部自适应。

`height`

height和width有一个明显的区别就是对百分比单位的支持。对于width属性，就算父元素width为auto，其百分比也是支持的。但是对于height属性，如果父元素为auto，只要子元素在文档流中，其百分比值完全被忽略了。

常见问题：设置满屏显示的背景高度

#demo{
    width:100%;      /*这是多余的*/
    height:100%;     /*这是无效的*/
    background-color: yellow;
}
// 有宽度没高度。百分比高度要想起作用，其父级必须有一个可以生效的高度值。

html,body{
    height: 100%;
}
//添加以上属性高度起作用。
#demo{
    width:100%;      
    height:100%;     
    background-color: yellow;
}

为什么父级没有具体高度的时候，height：100%会无效？

浏览器渲染的基本原理：先渲染父元素，后渲染子元素。当渲染到父元素的时候，子元素的width：100%没有被渲染，宽度就是图片加文字内容的宽度。等渲染到子元素的时候，父元素宽度已经固定，此时的width：100%就是已经固定好的父元素的宽度。宽度不够就溢出overflow。

规范中指出如果包含块的高度没有显示指定，（即高度由内容指定），并且该元素不是绝对定位，则计算值为auto；auto与百分比无法计算。

宽度的解释是：如果包含块的宽度取决于该元素的宽度，那么产生的布局在CSS2.1中是未定义的。浏览器根据自己的理解发挥，按照包含块真实的计算值作为百分比计算的基数。

如何让元素支持height：100%？

设定显式的高度值(针对容器)：html,body{height:100%}
使用绝对定位(针对元素本身)：div{height:100%; position:absolute}

这两种情况下height：100%就会有计算值。
绝对定位元素宽高的百分比计算是相对于padding box的，而非绝对定位的元素是相对于content box的。

常用属性

`background`

background-color背景颜色：transparent[default]默认透明，inherit继承父类，colorName
background-image背景图像：url
background-repeat如何重复背景图像：repeat，repeat-x，repeat-y – 背景图片是否重复
background-attachment：fixed – 背景图像不会滚动
background-size: length|percentage|cover|contain;

`text`

`font`

font-family设置字体：
font-size字体的尺寸：
font-weight字体的粗细：

`设置链接的样式`

a:link{text-decoration|color|background-color} - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

`margin塌陷(margin-collapse)`

什么是margin塌陷?

– 因为CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。 但对于父块DIV内含子块DIV的情况，就会按另一条CSS惯例来解释了，那就是：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。

垂直并列时的塌陷：垂直之间塌陷的原则是以两盒子最大的外边距为准。

要强调是的外边距的塌陷问题只会在垂直之间产生塌陷；水平之间不受影响的；
还有就是两个盒子的垂直外边距完全接触才会触发。

解决方法：

一个方向上总是使用一种margin，不要混着用，比如竖直方向上总是只使用margin-bottom，比如水平方向上总是只使用margin-left。

2 . 嵌套关系时的塌陷：设置子元素的margin，父元素也具有与子元素相同的margin值。具体说就是子类标签设置margin-top:50px;时，不是子类标签距离父类标签上边框50像素。而是子类标签和父类标签距离上级标签50个像素。

可以理解成，两个盒子都是一致对外的外边距，那么应该取一个合并的外边距为准。但是实际应用中会用到的是在父级里留出空隙。就需要解决问题。
这里写图片描述

解决方法：

父元素设置为块状格式化上下文元素
父元素设置border，为外层添加border后父子盒子就不是真正意义上的贴合。
父元素设定padding值。
父元素和第一个子元素之间添加内联元素进行分割。

CSS 外边距合并
 CSS的margin塌陷（collapse）
margin-塌陷问题
 CSS Margin 坍塌

这里写图片描述

块级格式化上下文(BFC)

什么是BFC？

Block Formatting Context 块级格式化上下文：是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。官方解释

BFC是一个封闭空间，内部子元素不会影响外部的元素。下面的样式只要满足一项，就说明这个盒子是BFC：

根元素或包含根元素的元素
float: 不为none
position: 不为visible
display: inline-block | table-cell | table-caption | flex | inline-flex
overflow: hidden | scroll | auto

BFC能解决什么？

外边距折叠
父元素高度塌陷
阻止文字环绕

BFC总结：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素是不会影响到外面的元素。
BFC的区域不会与float的元素区域重叠。
计算BFC的高度时，浮动子元素也参与计算。

BFC（Block Formatting Context）基础分析
 块格式化上下文

simpleone_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
180707 CSS

概述什么是CSS？层叠样式表 (Cascading Style Sheets)把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率层叠次序浏览器缺省设置外部样式表内部样式表（位于标签内部）内联样式（在 HTML 元素内部）CSS语法大小写不敏感（选择器除外）选择器：{声名}声名：属性/值selec...
复制链接

扫一扫