CSS收获（2）

最新推荐文章于 2023-06-03 16:23:27 发布

续航，#序章

最新推荐文章于 2023-06-03 16:23:27 发布

阅读量898

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_63260581/article/details/121308726

版权

十，盒子模型

盒子模型组成:border边框 content内容 padding内边距 margin外边距

一， border；
三个属性值：border-width border-style（solid实线，dashed虚线，dotted点线）
边框简写border：（其后三个属性值顺序可颠倒）

border-collapse 合并相邻的边框

二， padding；用于设置内边框，即边框与内容之间的距离

padding-top/bottom/left/right

padding简写；
padding会影响盒子大小，width和height减去内边距的大小（同border）

*没有指定宽度，padding不会撑开盒子
三， margin外边距；

margin-top/bottom/left/right

外边距可以使盒子水平居中显示，但必须满足三个条件；1盒子必须指定宽度（width）
2盒子的左右外边距都设置为auto（margin：0 auto）
注，以上是块元素水平居中对齐，若想让行内元素和行内块元素水平居中对齐，
只要给其父元素设置text-align：center

清除内外边距，* { padding:0; margin:0;}

四，圆角边框

语法：border-radius：length（px）

圆的做法；让length等于正方形盒子的宽度的一半

圆角矩形的做法；让length等于盒子的高度的一半

border-radius可调四个方向的值例如；border-top-left-radius（改动左上角的边框）

五，盒子阴影

box-shadod:h-shadow(必需，水平阴影的位置） v-shadow(必需，水平阴影的位置） blur （阴影的距离） spread （阴影的尺寸） color （阴影的颜色） inset/ouset

六，文字阴影

text-shadow： h-shadow(必需，水平阴影的位置） v-shadow(必需，水平阴影的位置） blur （阴影的距离）
color （阴影的颜色）

附盒子居中的方式

1.用最传统的margin

2.利用transform

3.利用flex弹性布局justify-content:center align-items:center

十一，浮动

一，传统网页布局的三种方式

1 标准流 2 浮动 3 定位

二，浮动 float 选择器 {float：left / right / none}

设置浮动元素的特性；1 脱离标准普通流的控制，移动到指定位置，（脱标）

* 2 浮动的盒子不再保留原先的位置

3 浮动元素具有行内块元素特性

浮动元素经常和标准流父级搭配使用；先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
　　　　　，符合网页布局第一准则

三，清除浮动clear:both
1，额外标签法：在最后浮动的元素后面加一个块级元素<div class=""> </div> 或者<br />

2，*父级添加overflow属性：overflow：hidden （无法显示溢出的部分）

3，*父级添加after伪元素

4，*父级添加双伪元素

四；为什摸要清除浮动：父级没高度子盒子浮动了影响下面布局
浮动的盒子不会外边距合并+

十二.定位

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子，而定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

一，定位组成；定位=定位模式+边偏移

定位模式决定元素的定位方式，通过CSS的position来设置，其值可分四个； ststic（静态定位） relative（相对定位） absolute（绝对定位） fixed（固定定位）

边偏移就是定位的盒子移动到最终的位置。有top，bottom，left和rightop，bottom，left和right四个属性

1，static=标准流

2，relative相对定位；是元素在移动位置的时候，是相对它原来的位置来说的，

特点：它是相对于自己原来的位置移动的，（移动位置的参考点是自己原来的位置）；
原来在标准流的位置依然占有，后面的盒子依然以标准流的方式对待它。(不脱标，继续保留原来位置）。

3，绝对定位absolute；元素在移动位置的时候，是相对它祖先元素来说的

特点：如果没有祖先元素或者祖先元素没有定位，则以则以浏览器为准定位；
如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考移动位置；
绝对定位不再占有原先的位置（脱标）。

子绝父相

4，固定定位fixed；

特点：以浏览器的可视窗口为参照点移动元素；
跟父元素没有任何关系；
不随浏览器的滚动而滚动；
固定定位不占有原先的位置。（脱标）

5，粘性定位sticky

特点；以浏览器的可视窗口为参考点移动元素；
粘性定位站有原先的位置；
必须添加top，bottom，left和right,才有效。

注,在网页布局中常见的一些词语

logo 标志（一定要加浮动）

nav 导航栏<div class="nav">
<ul>
<li>
<a href=""> </a>
</li>
</ul>
</div>（ li清除.用list-style：none）li 块级元素

搜索框 search <input type="text"> <button></button>待补充

十三.css书写顺序

1.布局定位属性；*display position float clear visibility overflow

2.自身属性；width height margin padding border background

3.文本属性；color font text-decoration text-align vertical-align white-space bread-word

4.其他属性（CSS3）；content cursor border-radius box-shadow text-shadow background:linear-gradient

十四.CSS新增过度属性

过渡transition：要过渡的属性花费时间运动曲线何时开始

transition：（谁来变化给谁加，例如transition：width 1s ,height 1s

十五。flex布局

一，flex布局原理；给父元素设置display:flex

二flex布局父项常见属性 1；flex-direction：row（行以x轴为主轴）一般默认为X轴为主轴
column（列以y轴为主轴）

2;*justify-content设置主轴上的子元素排列方式

flex-start；默认值从头部开始如果x轴，则从左到右
flex-end；从尾部开始排列
center；在主轴居中对齐（如果主轴是x轴，则水平对齐）
space-around；平分剩余空间
space-between；先两边贴边，再平分剩余空间

3；flex-wrap；设置元素是否换行（在flex布局中，默认的元素是不换行的）

flex-wrap：nowarp/wrap

4；*align-items设置侧轴上的子元素排列方式（单行）

属性值；flex-start（从上到下）；flex-end（从下到上；）

center（挤在一起居中（垂直居中））；stretch（拉伸默认值）

5；*align-content设置侧轴上的子元素的排列方式（多行）

6；flex-flow；复合属性，相当于同时设置设置了flex-direction和flex-wrap

十五，CSS新增属性

一. box-shadow(阴影效果)

使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
支持:
FF3.5, Safari 4, Chrome 3

二. border-colors(为边框设置多种颜色)
使用:
border: 10px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
说明:
颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555;
支持:
FF3+

三. boder-image(图片边框)
使用:
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20 ---> 边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2). 边框图片效果(目前仅实现了两种):
repeat --- 边框图片会平铺, 类似于背景重复;
stretch --- 边框图片会以拉伸的方式来铺满整个边框;
(3). 必须将元素的边框厚度设置为非0非auto值.
支持:
FF 3.5, Safari 4, Chrome 3

四. text-shadow(文本阴影)
使用:
text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>];
说明:
(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色; 当<模糊半径>未指定时, 半径值为0;
(2) shadow可以是逗号分隔的列表, 如:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;
(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;
(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.
支持:
FF 3.5, Opera 10, Safari 4, Chrome 3

五. border-radius(圆角边框)
使用:
-moz-border-radius:5px;
-webkit-border-radius:5px;
支持:
FF 3+, Safari 4, Chrome 3

六. opacity(不透明度)
使用:
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter(opacity=50);
支持:
all

七. box-sizing(控制盒模型的组成模式)
使用:
box-sizing: content-box | border-box; // for opera
-moz-box-sizing: content-box | border-box;
-webkit-box-sizing: content-box | border-box;
说明:
1. content-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;
2. border-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度
也不会变).
支持:
FF3+, Opera 10, Safari 4, Chrome 3

safari 4, chrome 3

八. outline(外边框)
使用:
outline: 边框厚度边框样式边框颜色;
outline-offset: 偏移值;
说明:
outline-offset需要独立写, 简写是无效的.
支持:
FF3+, safari 4, chrome 3, opera 10

九 background-origin(指定背景图片从哪里开始显示)
使用:
-webkit-background-origin: border | padding | content;
-moz-background-origin: border | padding | content;
说明:
(1) border --> 从border区域开始显示背景;
(2) padding --> 从padding区域开始显示背景;
(3) content --> 从content区域开始显示背景;
注意:
1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3, FF 3+

十. background(为一个元素指定多个背景)
使用:
background: [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]
例子:
background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom;
支持:
safari 4, chrome 3

十一. hsl(通过色调, 饱和度, 亮度来指定颜色值)
使用:
hsl: ( || || );
说明:
(1) length: h(色调), 0(或360)表示红色, 120表示绿色, 240表示蓝色;
(2) percentage: s(饱和度), 取值为0%到100%之间的值;
(3) percentage: l(亮度), 取值为0%到100%之间的值;
例子:
background: hsl(240, 50%, 100%);
color: hsl(100, 80, 100%);
支持:

safari 4, chrome 3, FF3, opera 10

十四. rgba(基于r,g,b三个颜色通道来设置颜色值, 通过a来设置透明度)
使用:
rgba: (r, g, b, opacity);
说明:
(1) r: 红色, 正整数 | 百分数;
(2) g: 绿色, 正整数 | 百分数;
(3) b: 蓝色, 正整数 | 百分数;
(4) a: 透明度, 取值在0到1之间;
(5) 正整数在0到255之间, 百分数在0%到100%之间.
例子:
rgba: (100%, 244, 0, 0.5);
支持:
safari 4, chrome 3, FF3, opera 10
————————————————

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.card {

margin: 0;

padding: 0;

background-image: url(tupian.html);