前端学习之路

CSS基础总结

2020-08-14  本文已影响0人  Joel_zh

什么是CSS

CSS是层叠样式表，用于控制网页数据的表现，使得网页数据和表现分离。

CSS引入的四种方式

<p style="background-color: rebeccapurple">hello css</p>

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        p{ 
            background-color: rebeccapurple; 
         } 
    </style>
</head>

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" href="1.css"> 
</head>

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        @import "1.css"; 
    </style> 
</head>

注意：使用导入式，css是在整个页面都加载后再导入的，这样就可能导致网页在一个短时间内处于杂乱的状态。但是链接式不一样，他是在加载网页内容前，先导入的，所以不存在这个问题。

CSS选择器

*:通用元素选择器，控制所有的标签
*{background-color: rebeccapurple}
E:标签选择器，控制所有该标签的样式 
p*{background-color: rebeccapurple}
.info class选择器 也可以具体指定某个标签下的选择器 
E .class .abc{background-color: rebeccapurple} 
div .abc{background-color: red} 
#info E #info id 选择器。 ID是唯一的，class也可以不唯一。
#abc{background-color: rebeccapurple} 
div #abc{background-color: red}

E,F 多元素选择器，同时控制多个元素。
div,a{background-color: rebeccapurple} 
E F 后代选择器，注意空格。 
E>F 子选择器 
E+F 毗邻选择器，找到紧跟着E后面的F。
注意：后代选择器是包括子孙后代，子选择器只包括子代

E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） 
p[title] { color:#f00; } 

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] 
{ color:#f00; } 

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素 
div[class^="test"]{background:#ffff00;} 

E[attr$=val] 匹配属性值以指定值结尾的每个元素 
div[class$="test"]{background:#ffff00;} 

E[attr*=val] 匹配属性值中包含指定值的每个元素 
div[class*="test"]{background:#ffff00;}

a:link 控制没接触过的链接 
a:hover 鼠标放在上面时 
a:visited 已经访问的链接 
a:active 选定的时候

E:first-letter  向文本的第一个字母添加特殊样式。
E:first-line    向文本的首行添加特殊样式。
E:before    在元素之前添加内容。
E:after 在元素之后添加内容。

CSS的继承和优先级

css继承

所谓的继承就是说父标签的部分属性可以被后代继承，但是这个权重是非常低的，只要是有相同的属性控制，就可以直接被覆盖。有部分属性是无法被继承的:border, margin, padding, background等

css优先级

css优先级是指在多个选择器同时控制同一个标签时，应该选择哪一个。
important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
权重、特殊性计算法：

计算方式是逐个累加。 比如 div .aaa权重为1+10

!important

有这个声明的优先级是最高的，除非冲突不然无视一切。当冲突时，再使用权重比较。

CSS常用属性

颜色属性

<div style="color:blueviolet">ppppp</div> 
<div style="color:#ffee33">ppppp</div> 
<div style="color:rgb(255,0,0)">ppppp</div> 
<div style="color:rgba(255,0,0,0.5)">ppppp</div>

字体属性

font-size: 20px/50%/larger 
font-family:'Lucida Bright' 
font-weight: lighter/bold/border/ 
<h1 style="font-style: oblique">hello</h1>

背景属性

background-color: cornflowerblue;
background-image: url('1.jpg'); 
background-repeat: no-repeat;  (repeat:平铺满) 
background-position: right top（20px 20px);  (横向：left center right) 
(纵向：top center bottom)

文本属性

font-size: 10px; 
text-align: center; 横向排列
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 
vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 
text-indent: 150px; 首行缩进 
letter-spacing: 10px; 
word-spacing: 20px; 
text-transform: capitalize;

边框属性

border-color: red; 
border-style: dashed; 
border-width: 1px; 
可以简写为：border：1px dashed 1px

display属性

none 
block 
inline
inline-block 
其中inline-block拼接的两个元素中间有小空隙，可以通过下面的方法去掉 在外层div下，word-spacing: -5px;

外边距，内边距

margin 外边距
padding 内边距
border 边框
content 内容

刻度

在CSS中刻度是用于设置元素尺寸的单位。
长度单位包括包括：相对单位和绝对单位。
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有： cm, mm, q, in, pt, pc, px

绝对长度单位

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

动态计算长度值

calc() = calc(四则运算)

文本相对长度单位

em
相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
浏览器的默认字体大小为16像素，浏览器默认样式也称为user agent stylesheet，就是所有浏览器内置的默认样式，多数是可以被修改的，但chrome不能直接修改，可以被用户样式覆盖。
rem
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。（相对是的HTML元素的字体大，默认16px）

盒模型

CSS盒子模型：网页设计中CSS技术所使用的一种思维模型。
CSS盒子模型组成：外边距（margin）、边框（border）、内边距（padding）、内容（content）。
CSS盒子模型分为：标准W3C盒子模型，IE盒子模型，注意在两种模型中宽（width）和高（height）包括属性的不同。

W3C模型中
CSS中的宽（width）=内容（content）的宽
CSS中的高（height）=内容（content）的高

W3C盒模型

IE模型中
CSS中的宽（width）=内容（content）的宽+（border+padding）* 2
CSS中的高（height）=内容（content）的高+（border+padding）* 2

IE盒模型

在代码顶部加如下的 doctype 声明

　　<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

使页面以W3C盒子模型渲染。

box-sizing属性

css绘图

根据盒模型，设置content为0，展示border，通过控制隐藏部分边框，绘制三角形、梯形。

外边距叠加

在CSS中，两个或多个毗邻的标准流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。

解决外边距叠加

BFC与IFC

BFC（Block Formatting Context）即“块级格式化上下文”。
IFC（Inline Formatting Context）即行内格式化上下文。
常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。

BFC决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

如何产生BFC

如何产生BFC
当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：

CSS3触发BFC方式则可以简单描述为：在元素定位非static,relative的情况下触发，float也是一种定位方式。

BFC的作用与特点

定位

position

position：static | relative | absolute | fixed | center | page | sticky
默认值：static，center、page、sticky是CSS3中新增加的值。

z-index属性

z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
当多个元素层叠在一起时，数字大者将显示在上面。

auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
整数：用整数值来定义堆叠级别。可以为负值。 说明：
检索或设置对象的层叠顺序。

:target伪类

E:target { css }
URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。只有支持CSS3的浏览器可用。

float浮动

float取值

float的特性

清除浮动

该属性的值指出了不允许有浮动对象的边。

clear：none | left | right | both
适用于：块级元素

取值：

清除外部浮动
需要注意的是clear是用于控制元素本身的，不能影响别的元素。
清除内部浮动
当一个包含块内部有浮动元素时，外部块不会计算浮动块的高度与宽度，为了让内部的浮动元素撑开包含块，需要还原高度，暂且称为清除内部浮动。

上一篇 下一篇

猜你喜欢

热点阅读