CSS网页皮肤 | 青训营笔记

用户5197441653766
122 阅读8分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

CSS是什么？

是用来定义页面元素的样式

设置字体和颜色

设置位置和大小

添加动画效果

CSS代码模型

h1{    //选择器
    color:white;          
    font-size:14px;    // 属性：属性值；————声明块
}

CSS的使用形式

外链
<link rel:"stylesheet" href="外链地址">
嵌入
<style>
    li{
        margin:0;
       list-style:none;
    }
    p{
        margin:1em 0;
    }
</style>
内联
<p style="margin:1em 0"></p>

CSS是怎样工作的

image.png

选择器

找出页面中的元素，以便给他们设置样式使用多种方式选择元素

  • 按照标签名、类名或id
  • 按照属性
  • 按照DOM树中的位置

通配选择器*

选择所有

标签选择器

选择标签设置样式

id选择器

给标签设置id属性，通过id选中元素（id值在页面中唯一）

类选择器

对同一类型标签定义一个类class，对这一类进行选择，设置样式（可出现多次)

属性选择器

通过元素的属性、属性值进行选择

[disabled]{    //有disabled属性的元素
    bacground:#eee;
    color:#999;
}
input[style="password"]{    
//选中标签为input，属性为style，属性值为password的元素
    border-color:red;
    color:read;
}
a[href^="#"]{}     //a标签中以“#”开头的标签
a[href$=".jpg"{}    //a标签中以“.jpg”结尾的标签

伪类选择器

不基于标签和属性定位元素几种伪类

状态伪类

这个元素出于某种特定的状态下才会被选中

a:link{}    //当前默认状态下的a
a:visited{}    //被访问过的a
a:hover{}    //鼠标悬停时的a
a:active{}    //鼠标点击时的a
:focus{}    //（输入框）正在输入状态|链接被点击时

结构性伪类

根据dom节点出现的位置进行原则

li:firstchild{}    
//如果li是父级的第一个子元素，则被选中
li:lastchild{}    
//如果li是父级的最后一个子元素，则被选中

选择器组合

image.png

组选择器

body,h1,h2,h3,h4,h5,h6,ul,ol,li{ //所有所选择的元素
    margin:0;
    padding:0;
    }
[type="checkbox"],[type="radio"]{
    box-sizing:border-box;
    padding:0;
    }

颜色-RGB

区别颜色-HSL(色相，饱和度，亮度）

image.png

透明度（a） > a=1，完全不透明 > a=0，完全透明

字体

h1{
    font-family:Optima,Georgia,srif;
    //不止一种字体，以防浏览器没有字体，没有顺延下一位字体
    }
@font-face{    //字体文件放在服务器上指定字体
    font-family:"Megrim"; //指定字体名字（取名）
    url(https: / /fonts.gstatic.com/s/megrim/v11/46kulbz5wjvLqJZVam_hVUdI1w.woff2) format('woff2');
    //在url上下载字体文件，再用woff2字体
    }

字体大小

关键字（small、medium、large）

长度（px，em）

百分数（相对父元素字体大小）

字体样式

font-style: normal;   //非斜体
font-style: italic;   //斜体
font-weight: 100;     //字重（字体粗细）100-900

行高

line-height:10px;    //两行文字间基准线的距离为10px
line-height:1.6;     //行高为字体大小的1.6倍

空白符

white-space:normal;    //默认模式
white-space:nowrap;    //强制不换行
white-space:pre;       //保留所有的（包括空格和换行）
white-space:pre-wrap;  //保留空格，一行显示不下的时候自动换行
white-space:pre-line;  //合并空格，保留换行

对齐

text-align:left;    
//left,right,center,这三个取值，想当直接，就是居左，居右，据中。其中，在不设置text-align属性时，浏览器默认是居左的
text-align:justify;
//两端自适应对其,根据父元素的宽度，进行自适应的两端对其
text-align:inherit;
//从父元素继承text-align属性的值。

选择器的特异度

选择器越特殊，所选元素优先级越高，优先级越高在有相同属性时就选择进行哪种CSS效果

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值（可继承属性如color，font-size）

一般盒模型属性不可继承，字属性可继承

显式继承

*{
    box-sizing:inherit; 
    //通过通配选择器设置所有盒子的box-sizing为inherit
    }
html{
    box-sizing:border-box;
    //使页面内所有box-sizing为border-box
}
.some-widget{
    box-sizing:content-box;
    //让.some-widget的box-sizing继承他的容器
}

初始值

CSS中，每个属性都有一个初始值

  • background-color的初始值为transparent

  • margin- left 的初始值为О

可以使用initial关键字显式重置为初始值

  • background-color: initial

CSS求值过程

image.png

image.png

布局

确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术：常规流（行级，块级，表格布局，FlexBox，Grid布局），浮动，定位

盒模型

image.png

width宽度

指定content box宽度

取值为长度、百分数、auto

auto由浏览器根据其它属性确定

百分数相对于容器的content box宽度

height高度

指定content box高度

取值为长度、百分数、auto

auto 取值由内容计算得来

百分数相对于容器的content box高度

容器有指定的高度时，百分数才生效

padding内边距

指定元素四个方向的内边距

百分数相对于容器宽度

image.png

border边框

指定容器边框样式、粗细、颜色

三种属性（border-width，border-style，border-color），四个方向（border-top，border-right，border-bottom，border-left）

image.png

image.png

image.png

margin外边距

指定元素四个方向的外边距

距取值可以是长度、百分数、auto

百分数相对于容器宽度

外边距在垂直方向上重叠

margin:auto;    //水平居中

box-sizing:border-box

image.png

overflow溢出内容处理

overflow:visible;        //展示超出范围
overflow:hidden;         //隐藏超出范围
overflow:scroll;         //滚轮，超出滚动
overflow-wrap:break-word;//自动换行

块级与行级

块级：Block Level Box 不和其它盒子并列摆放， 适用所有的盒模型属性

行级：lnline Level Box 和其它行级盒子一起放在一行或拆开成多行， 盒模型中的width、height不适用

块级元素与行级元素

块级元素：生成块级盒子（body、article、div、main、section、h1-6、p、ul、li等）display: block

行级元素：生成行级盒子，内容分散在多个行盒(line box)中（span、em、strong.cite、code等）display: inline

display

display:block;
//块级盒子
display:inline;
//行级盒子
display:inline-block;
//本身是行级,可以放在行盒中;可以设置宽高;作的一个整体不会被拆散成多行
display:none;
//排版时完全被忽略

常规流 Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流

其它元素都在常规流之内（in-flow)

常规流中的盒子，在某种排版上下文中参与布局

如：行级排版上下文，块级排版上下文，Table排版上下文，Flex排版上下文，Grid排版上下文

行级排版上下文lnline Formatting Context (IFC)

只包含行级盒子的容器会创建一个IFC

IFC内的排版规则

  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align决定一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动(float)元素*

块级排版上下文Block Formatting Context (BFC)

某些容器会创建一个BFC

  • 根元素
  • 浮动、绝对定位、 inline-block
  • Flex子项和Grid子项
  • overflow值不是visible的块盒
  • display: flow-root;

BFC内的排版规则

盒子从上到下摆

放垂直margin合并

BFC内盒子的margin不会与外面的含并

BFC不会和浮动元素重叠

Flex Box

它可以控制子级盒子的:

  • 摆放的流向(←→↑↓)
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

image.png

主轴与侧轴

image.png

justify-content主轴上进行对齐

image.png

align-items机械对齐（侧轴上进行对其）

Flexibilitty

可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。

  • flex-grow:n;有剩余空间时的伸展能力
  • flex-shrink容器空间不足时收缩的能力
  • flex-basis没有伸展或收缩时的基础长度

image.png

Grid布局
image.png image.png

display:grid;

  • display: grid使元素生成一个块级的Grid容器
  • 使用grid-template相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列

image.png

划分网格

image.png

image.png

image.png

grid line网格线

image.png

位置1133

image.png

image.png

image.png

浮动float

实现文字环绕效果

定位position

position:static;      //默认值，非定位元素
position:relative;    //相对自身原本位置偏移，不脱离文档流
position:absolute;    //绝对定位，相对非static祖先元素定位
position:fixed;       //相对于视口绝对定位

relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top、left、bottom、right 设置偏移长度
  • 流内其它元素当它没有偏移一样布局

image.png

原本位置依然在页面上占位

absolute

  • 脱离常规流
  • 相对于最近的非static祖先定位
  • 不会对流内元素布局造成影响

image.png

相对于父级元素进行定位

fixed

脱离常规流，总是相对于窗口进行定位

avatar
文章
阅读
粉丝