《深入解析css》 |CSS基础

前言：所有内容源于基思·J·格兰特的《深入解析css》

叠层

层叠指的就是这一系列规则。它决定了如何解决冲突。当声明冲突时，层叠会依据三种条件解决冲突：

  • 样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。
  • 选择器优先级：哪些选择器比另一些选择器更重要。
  • 源码顺序：样式在样式表里的声明顺序。

image.png

1.样式来源

  • 浏览器默认样式：优先级低
  • 你自己引入的样式
  • !important声明：优先级高

2.优先级

  • 行内样式：可以覆盖任何来自样式表或者<style>标签的样式（除非其他声明了!importent）

    <div style="color:red"></div>

  • 选择器：ID选择器>类选择器>标签选择器

    优先级比较规则：选择器ID数量多者胜；若ID数量一致，类选择器多者胜；若以上两者都一致，标签选择器多者胜。

    其他说明：
    伪类选择器（如：hover）和属性选择器（如[type="input"]）与一个类选择器的优先级相同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响。

3.源码顺序

如果两个声明的来源和优先级相同，后出现的样式会覆盖先出现的样式

总结

浏览器遵循三个步骤，即来源、优先级、源码顺序，来解析网页上每个元素的每个属性。如果一个声明在层叠中“胜出”，它就被称作一个层叠值。元素的每个属性最多只有一个层叠值

继承

如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。
image.png

但不是所有的属性都能被继承，默认情况下，只有特定的一些属性能被继承。它们主要是跟文本相关的属性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing；或者列表属性：list-style、list-style-type、list-style-position以及list-style-image；表格的边框属性border-collapse和border-spacing（不完全枚举）

开发者工具的使用

image.png

特殊值

  • inherit

    用继承的方式代替一个层叠值，

    a:link{color:blue}		//全局的网页链接颜色
.footer{color #666}		//页脚的文本颜色
.footer a{color:inherit}	//从页脚继承的文本颜色

  • initial

    撤销作用于某个元素的样式（每一个CSS属性都有初始值，这种方式可以重置初始值）

    .footer a{color:initial} 
//在大多数浏览器中，黑色是color属性的初始值，所以color: initial等价于color: black

简写属性

简写属性用于同时给多个属性赋值，比如：

  • font可以设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。

  • background可以设置多个背景属性：background-color、background-image、background-size、background-repeat、background-position、background-origin、background-chip以及background-attachment。

  • border可以设置：border-width、border-style以及border-color

  • border-width可以设置：上、右、下、左四个边框宽度

覆盖其他样式

简写属性可以省略一些值，只指定我们关注的值。但这样做仍然会设置省略的值，即它们会被隐式地设置为初始值。

h1{font-weight:bold;}
.title{ font:32px Arial} 	//-->隐性设置了默认值font-weight:normal，故不会加粗

简写值的顺序

简写属性会尽可能包容指定的属性值的顺序。比如设置border: 1px solid black或者border: black 1px solid，两者都会生效。但是有很多属性的值很模糊，在这种情况下，值的顺序很关键。

  • 上、右、下、左

    当遇到像margin、padding这样的属性，还有为元素的四条边分别指定值的边框属性时，这些属性的值是按顺时针方向，从上边开始的。这种模式下的属性值还可以缩写，没有声明的取其对边的值：

    padding:1em				//上右下左
padding:1em 2em;		//上下 左右
padding:1em 2em 1em;	//上 左右 下

  • 水平、垂直

    还有一些属性只支持最多指定两个值，这些属性包括background-position、box-shadow、text-shadow（严格来讲它们并不是简写属性）。这些属性值的顺序跟上方的正好相反。

    比如，padding: 1em 2em是先指定了上/下属性值，然后才是右/左属性值，而background-position: 25% 75%则先指定右/左属性值，然后才是上/下属性值

相对单位

绝对单位如像素，如5px放在哪里都一样大。而像em和rem这样的是相对单位。相对单位的值会根据外部因素发生变化。

随着技术的发展，加上制造商推出高清显示器，智能手机出现，开发人员再也无法假装每个用户访问网站的体验都能一样。不管我们喜欢与否，都得抛弃以前那种固定宽度的栏目设计，开始考虑响应式设计。
相对单位可以基于窗口大小来等比例地缩放字号，或者将网页上的任何元素的大小都相对于基础字号来设置

em

1em等于当前元素的字号，而2em就相当于两倍当前元素的字号。当设置padding、height、width、border-radius等属性时，使用em会很方便。这是因为当元素继承了不同的字号，或者用户改变了字体设置时，这些属性会跟着元素均匀地缩放。

.box-small{font-size:12px}
.box-large{font-size:18px}
.box{
    padding:1em;
    border-radius:1em;
}

<div class="box box-small"></div>
<div class="box box-large"></div>

rem

当使用em给元素定义字号并且多级嵌套时，可能会发生文字缩小或放大的现象。rem可以解决这个问题。

在DOM中，根节点是所有其他元素的祖先节点。根节点有一个伪类选择器:root，等价于类型选择器html。rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位。

:root{font-size:1em} 	//表示使用浏览器的默认字号
ul{font-size:.8rem}		//表示相对于根元素将字号扩大八倍

响应式面板

根据屏幕尺寸，可以用媒体查询改变根元素的字号。这样就能够基于不同用户的屏幕尺寸，渲染出不同大小的面板。

//作用在所有屏幕上，可能会被后面的覆盖
:root{font-size:0.75em;}

//作用在宽度为800px及以上的屏幕，覆盖前面的值
@media (min-width:800px){
    :root{font-size:0.875em;}
}

//作用在宽度为1200px及以上的屏幕，覆盖前面的值
@media (min-width:1200px){
    :root{font-size:0.875em;}
}

如果需要让同一个组件在页面某些部位显示不同的大小，可以用em来单独缩放一个组件。

.panel{
    font-size:1rem;
    padding:1em;
}
.panel>h2{
    font-size:0.8em;
}

视口

视口指浏览器窗口里网页可见部分的边框区域，它不包括浏览器的地址栏、工具栏、状态栏。视口的相对单位是相对于浏览器视口定义的

  • vh：视口高度的1/100
  • vw：视口宽度的1/100
  • vmin：视口宽、高中较小的一方的1/100
  • vmax：视口宽、高中较大的一方的1/100

比如，100vw等同于整个视口宽度，50vw等于视口宽度的一半；

vmin有个作用：保证元素在屏幕方向变化时适应屏幕。在横屏时，vmin取决于高度；在竖屏时，则取决于宽度。

div{
    width:90vmin;
    height:90vmin;
    background-color:red
}

calc()定义字号

calc()函数内可以对两个及其以上的值进行基本运算。支持的运算包括：加（+）、减（−）、乘（×）、除（÷）。在下面的例子中，慢慢缩放浏览器，字体会平滑地缩放，0.5em保证了最小字号，1vw则确保了字体会随着视口缩放。

:root{
    font-size:calc(0.5em+1vm)
}

无单位的数值

有些属性允许无单位的值如：line-height、z-index、font-weight

自定义属性

css可以自定义属性。下面的代码定义了一个名叫--main-font的变量。变量名前面必须有两个连字符--，用来跟CSS属性区分，剩下的部分可以随意命名。变量必须在一个声明块内声明。比如这里是在root选择器里，因此该变量可以在整个网页使用：

1.声明变量

:root{
    --main-foot:Arial
}

2.调用函数var()使用该变量

p{
    font-family:var(--main-foot)
}

如果刚好用了内置变量功能的CSS预处理器，比如Sass或者Less，你可能就不太想用CSS变量了。然而，新规范里的CSS变量比任何一款预处理器的变量功能都多，因此作者倾向于称其为“自定义属性”，而不是变量，以强调它跟预处理器变量的区别。

var()函数接受第二个参数，指定备用值

p{
     font-family:var(--main-foot,'宋体')
}

动态改变自定义属性

例如，可以定义一个变量为黑色、一个变量为白色；然后在某个容器中重新定义变量的颜色。那么，在容器内部会动态解析这些变量。

<div class="panel">
  <p>zxcvbwfhs</p>
</div>

<aside class="dark">
	<div class="panel">
 	 <p>zxcvbwfhs</p>
	</div>
</aside>

:root{
    --main-bg:#fff;
    --main-color:#000
}
.panel{
    background-color:var(--main-bg);
    color:var(--main-color)
}
.dark{
    --main-bg:#333;			//在容器中从定义变量
    --main-color:#fff;
}

盒模型

元素宽度

默认盒模型

padding、border、margin是追加在内容宽度外边的。当子元素的宽度（包括padding、border、margin）超过父容器内容宽度的100%的时候，块级元素会自动折行。

默认盒子的宽=内容宽度

box-sizing:content-box //默认

image.png

调整盒模型

盒模型还有另一种：border-box，此时盒子的宽=内容宽度+padding+border

box-sizing:border-box

image.png

全局设置border-box

选中页面所有元素及伪元素

*,::before,::after{ box-sizing:border-box}

但是如果在网页中使用了带样式的第三方组件，可能会有冲突，这时可以：

:root{box-sizing:border-box}
*,::before,::after{box-sizing:inherit}

给列之间加上间隔

假设有两个同级的div：main和sidebar

.main{
    float: left;
    box-sizing: border-box;
    width: 70%;
}
.sidebar{
    float: left;
    box-sizing: border-box;
    width:30%
    padding: 1.5em;
}

可以基于百分比的外边距留白

.sidebar{
    width:30%;
}
------------------变成：
.sidebar{
    width:29%;
    margin-left:1%
}

元素高度

普通文档流是为限定的宽度和无限的高度设计的。内容会填满视口的宽度，然后在必要的时候折行，因此，容器的高度由内容决定

普通文档流——指的是网页元素的默认布局行为。行内元素跟随文字的方向从左到右排列，当到达容器边缘时会换行。块级元素会占据完整的一行。

控制溢出行为

当明确设置一个元素的高度时，内容可能会溢出容器。用overflow属性可以控制溢出内容的行为，该属性支持以下4个值：

  • visible：所有内容可见，即使溢出容器边缘（默认值）
  • hidden：溢出容器内边距边缘的内容被裁剪，无法看见
  • scroll：容器出现滚动条，用户可以通过滚动查看剩余内容
  • auto：只有内容溢出时容器才会出现滚动条

overflow-x可以控制水平方向的溢出，overflow-y控制垂直方向溢出

实现等列高

首先可以采用百分比，然而想让百分比高度生效，必须给父元素明确定义一个高度。而且更多时候我们不确定高度，这时候可以用如下方法：

  • CSS表格布局

    /* container容器包含main和sidebar */
.container{
    display: table;	  		/* 1. table布局*/
    width: 100%;				/* 2. 让表格填充容器的宽度*/
    border-spacing: 1.5em 0;	/* 3. table布局中，外边距不再生效，用border-spacing实现间隔*/
}

/* 4. 在container容器外包裹消除左右边距 */
.wrapper{
    margin-left: -1.5em;
    margin-right: -1.5em;
}

/* 5. 给子元素设置table-cell布局 */
.main{
    display: table-cell;
    box-sizing: border-box;
    width: 70%;
    padding: 1.5em;
}
/* 给子元素设置table-cell布局 */
.sidebar{
    display: table-cell;
    box-sizing: border-box;
    width:30%;
    padding: 1.5em;
}

  • Flex布局

    也称弹性容器，子元素默认等高。

    .container{
    display: flex;
}
.main{
    box-sizing: border-box;
    width: 70%;
}
.sidebar{
    box-sizing: border-box;
    width:29%;
    margin-left: 1%;
}

min-height和max-height

min-height可以指定一个最小高度。此时元素至少等于你指定的高度，如果内容太多，浏览器就会允许元素自己扩展高度，以免内容溢出

image.png

同理，max-height允许元素自然地增高到一个特定界限。如果到达这个界限，元素就不再增高，内容会溢出

垂直居中

vertical-align不生效问题：

vertical-align声明只会影响行内元素或者table-cell元素。对于行内元素，它控制着该元素跟同一行内其他元素之间的对齐关系。比如，可以用它控制一个行内的图片跟相邻的文字对齐。对于显示为table-cell的元素，vertical-align控制了内容在单元格内的对齐。

如果给块级元素设置vertical-align: middle，浏览器会忽略这个声明。

垂直居中指南：

  • 如果可以用一个自然高度的容器，给容器加上相等的上下内边距让内容居中。

    div{
    background-color: #0072b0;
    color: #fff;
    padding: 4em 0;
}

  • 如果容器需要指定高度或者避免使用内边距，对容器使用display: table-cell和vertical-align: middle

  • 如果可以用Flexbox， 详见flex布局

  • 如果容器里面的内容只有一行文字的行内元素，设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。

  • 如果知道容器和内容的高度，将内容绝对定位

  • 如果不知道内部元素的高度，用绝对定位结合变形（transform）

负外边距

负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。负外边距的具体行为取决于设置在元素的哪边

image.png

外边距折叠

当顶部和底部的外边距相邻时，就会重叠，产生单个外边距，数值取其中最大者。这种现象被称作折叠。

  • 文字折叠：外边距折叠的主要原因与包含文字的块之间的间隔相关。比如，段落<p>默认有1em的上外边距和1em的下外边距，当前后叠放两个段落时，它们的外边距不会相加产生一个2em的间距，而会折叠，只产生1em的间隔。

  • 多个外边距折叠：即使两个元素不是相邻的兄弟节点；或用额外的div将段落包裹，只要没有其他CSS的影响，所有相邻的顶部和底部外边距都会折叠。举个例子

    <h2>qqqqq</h2>
<div>
    <p>aaaaaaa</p>
</div>

    有三个不同的外边距折叠到一块了：<h2>底部的外边距、<div>顶部的外边距、<p>顶部的外边距。计算值分别是19.92px、0px、16px。因此最终间隔还是19.92px，也就是三者中最大的值。

  • 防止外边距折叠

    1. 对容器使用overflow: auto（或者非visible的值），防止内部元素的外边距跟容器外部的外边距折叠。这种方式副作用最小。
    2. 在两个外边距之间加上边框或者内边距，防止它们折叠。
    3. 如果容器为浮动元素、内联块、绝对定位或固定定位时，外边距不会在它外面折叠。
    4. 当使用Flexbox布局时，弹性布局内的元素之间不会发生外边距折叠。网格布局同理。
    5. 当元素显示为table-cell时不具备外边距属性，因此它们不会折叠。

容器内元素间距

猫头鹰选择器：不用给网页当前的内容固定外边距，而是应该采取更通用的方式，不管网页结构如何变化都能够生效。它长这样：＊ +＊

下面表示body内所有元素的相邻兄弟元素。有了这个，就不需要每次都给元素添加固定的外边距了

body * + *{
    margin-top:1.5em
}

<div class="container">
    <div class="sidebar">
        <a href="">123</a>
        <a href="">456</a>
        <a href="">759</a>
    </div>
</div>

完整css

body * + *{
    margin-top:1.5em
}

.container{
    display: flex;
}

.sidebar{
    background-color: #ccc;
    width:20%;
    padding: 1.5em;
    box-sizing: border-box;
}
.sidebar a{
    text-align: center;
    display: block;
    padding: .5em;
    background-color: #0072b0;
    text-decoration: none;
    color: white;
    font-weight: bold;
}

image.png

posted @ 2020-09-08 16:16  sanhuamao  阅读(451)  评论(0)  编辑  收藏  举报