前端学习- CSS2

weixin_57896572

已于 2022-09-29 19:35:57 修改

阅读量311

点赞数

文章标签：前端学习 css

于 2022-09-09 15:30:11 首次发布

本文链接：https://blog.csdn.net/weixin_57896572/article/details/126635971

版权

1 CSS的三大特性

CSS有三大特性：层叠性、继承性、优先级。

1.1 层叠性

给相同的样式设置相同的样式，此时会发生覆盖（层叠）。层叠性主要解决样式冲突问题。

原则

样式冲突时，遵循就近原则，哪个样式距离结构近，就执行哪个样式。
样式不冲突时，不会层叠。

1.2 继承性

子标签会继承父标签的某些样式，如：文本颜色和字号。

（1）注意

恰当使用继承，可以简化CSS样式的复杂性；
一般子元素可以继承父元素与文本相关的一些样式，比如：text-、font-、line-这些元素开头的样式，以及color样式。

（2）行高的继承性

父元素可以设置倍数行高。字体大小的多少倍当作行高。形如下式：font：12px/1.5 Microsoft；之后子标签可以通过改变字体大小来改变行高。

注意：

如果子标签没有指定文字大小，可以继承父标签的文字大小和行高。
行高可以有单位，也可以无单位。

1.3 优先级

当一个标签指定多个选择器时，会有优先级的产生。若选择器相同，采用就近原则；若选择器不同，根据选择器权重执行。

（1）选择器权重

!important>行内样式>ID选择器>类选择器/伪类选择器>元素选择器>继承/*

important使用方法：color=pink!important;

（2）注意

权重有四位数字，但是永远不会进位；
比较时从左往右依次比较。
简单记忆法：通配符/继承权重为0；标签选择器为1；类/伪类选择器为10；id选择器为100；行内样式表为1000；!important 为无穷大；
继承的权重是0！！如果子元素有写自己的样式，肯定优先执行子元素的样式，父元素继承来的样式权重最低！
谁的范围小，就执行谁。

（3）复合选择器

复合选择器会出现权重叠加的情况，要通过计算得到各自的优先级。注意，永远不会进位！

2 盒子模型

盒子模型就是把HTML页面中的布局元素看作一个矩形的盒子。页面布局有三大核心：盒子模型、浮动和定位。

2.1 盒子模型的组成

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

2.2 边框border

border：border- width｜border-style｜border-color

border-width：边框宽度，通常用px作为单位；
border- style：边框样式。实线solid、虚线dashed、点线dotted。其他样式较少用。
border- color：边框颜色
简写：border：1px solid red；三个样式之间没有顺序要求。
分开写：可以只写盒子的上边框、下边框、左边框或右边框。border-top/bottom/left/right

注意

细线边框：border- collapse：collapse；相邻边框合并。
边框大小会影响盒子大小。测量时应不带边框。

2.3 内边距

padding用来设置盒子内边距，即盒子内容和盒子边框之间的距离。可以分为padding-top/bottom/left/right。

（1）padding简写

padding：5px；表示上下左右均为5像素的内边距；
padding：5px 10px；第一个值表示上下边距，第二个值表示左右边距；
padding：5px 10px 15px；第一个值代表上边距，第二个值代表左右边距，第三个值表示下边距；
padding：5px 10px 15px 3px；从左往右依次表示上右下左边距，按照顺时针的顺序。

（2）注意

padding也会改变盒子的实际大小，内边距会撑大盒子；
padding会撑开盒子的特性可以巧妙利用，作出不同盒子大小排列，但盒子间距一样的效果，例如：导航栏。具体操作为：不设置盒子宽度，给盒子设置一样的内边距；
为了解决上述问题，应把盒子原大小减去内边距的大小，当作盒子的新宽度和高度；
盒子本身没有width/height属性时，padding不会撑开盒子大小。

2.4 外边距margin

设置盒子的外边距，有margin-top/bottom/left/right。margin的简写方式和padding完全一样。

（1）应用

让块级盒子水平居中：盒子必须有宽度，将盒子左右外边距设置为auto。margin：0 auto；

让行内元素/行内块元素水平居中，可以将其父级元素设置为text- align：center；

（2）外边距合并

使用margin定义块元素的垂直边距时，可能会出现外边距合并。

（3）嵌套块元素垂直外边距塌陷

对于两个具有嵌套关系的块元素，当子元素和父元素都设置了上外边距时，父元素的外边距会自动取两者中较大的上外边距。这种行为叫作塌陷。

解决方案：

给父元素定义边框，可以设置为透明的；
给父元素定义定边距；
为父元素添加overflow：hidden。

（4）清除自带内外边距

* {margin：0；padding：0；}

注意：对于行内元素尽量只设置左右边距！

3 PS 基本操作

4 圆角边框

border- radius：length；

length：表示圆弧切圆的半径。半径越大，弧度越大。单位可以是px，也可以是百分比。
正方形想变为圆形：设置为长度/高度的一半，可以用50%。
矩形想设置为圆角矩形：设置为高度的一半。

4.1 扩写

border- radius：10px 20px 30px 40px；四个值分别对应左上、右上、右下、左下。还是按照顺时间的顺序；
两个值依次对应两条对角线；

4.2 拆开写

border-top-left｜border- top- right ｜ border- bottom- right｜borde- bottom- left

注意，拆开写时单词顺序不能变，必须先top/bottom。

5 盒子阴影

box-shadow：h- shadow v-shadow blur spread color inset；

h-shadow：必需！水平阴影位置，允许为负值；
v-shadow：必需！垂直阴影阴影位置，允许为负值；
blur：可选。模糊距离，影子虚实，数值越大越模糊；
spread：可选。阴影尺寸；
color：可选。阴影颜色，一般使用半透明黑色，rgba；
inset：可选。默认为外阴影，将外部阴影改为内部阴影。

注意

默认为外阴影，但是不能写outset，写了会失效；
盒子阴影不占用空间，不影响其他元素排列；

6 文字阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow：必需！水平阴影位置，允许为负值；
v-shadow：必需！垂直阴影阴影位置，允许为负值；
blur：可选。模糊距离，影子虚实，数值越大越模糊；
color：可选。阴影颜色，一般使用半透明黑色，rgba；

7 CSS浮动

传统网页布局的三种方式：普通流（标准流）、浮动、定位。

普通流（标准流/文档流）：标签按照规定好的默认方式排列。例如：块级一行一个，行内一行多个；
浮动：可以改变元素标签的默认排列方式，应用：多个块级元素在一行显示；类似实现一行左边一个元素，右边一个元素的情况；
定位：类似页面滚动时，不变的导航栏和侧边栏；

网页布局准则：多个块元素纵向排列找标准流，多个块级元素横向排列找浮动。

7.1 浮动

选择器{ float：属性值；}

属性值包括none、left、right。

（1）浮动特性

浮动元素会脱离标准流，不再保留原先位置；
若多个盒子都设置了浮动，则会按照属性值一行内显示，并且顶端对齐；若一行放不下，会自动换行；
浮动元素会具有行内块特性。若行内元素设置为浮动，不需再转换为行内块元素即可直接设置宽高；若没有设置宽度的块级元素设置为浮动，则宽度由元素内容决定；

（2）注意

浮动的盒子中间是紧贴在一起，没有空隙的；
布局一般策略：先用标准流的父元素排列上下位置，之后子元素在里面设置为浮动。
若一个元素浮动后，一般其兄弟元素也要浮动，有“浮”同享；

7.2 清除浮动

适用情况：父盒子不方便给高度，希望父盒子随着子盒子的高度来变化。

选择器 {clear：属性值；}

属性值包括left、right、both。通常我们适用both。

清除浮动方法

（1）额外标签法（隔墙法）。在最后一个浮动子元素之后添加一个空标签。eg. <div style="clear:both" ></div>。新添加的空标签必须是块级元素，且不能浮动。

（2）给父级添加overflow。“overflow：hidden | auto | scroll”

（3）给父级添加 :after 伪元素。类似隔墙法的升级版，利用css给末端添加一个新的元素。

.clearfix:after {

content:"";display:block;height:0;clear:both;visibility:hidden;

}

.clearfix {*zoom:1;}

（4）给父级添加双伪元素清除浮动。“父母混打”

.clearfix:before,

.clearfix:after {content:"";display:table;}

.clearfix:after {clear:both;}

.clearfix {*zoom:1;}

8 切图

8.1 图层切图

选中图片那个图层，右击 -- 快速保存为PNG。

适用：图片在一个图层里或可以合并为一个图层。

注意：很多情况需要先合并图层，再导出。步骤为：1）先选中所需的所有图层；2）图层 -- 合并图层(CTRL+E) ；3）右击；4）快速保存为PNG。

8.2 切片切图

选中所需的切片
文件 -- 导出 -- 存储为web所用格式 -- 选中的切片 -- 保存
可以自己设置为透明格式，关闭背景

8.3 PS 插件切图

Cutterman 插件

9 CSS 属性书写顺序

布局定位属性：display、position、float、clear、visibility、overflow。建议display第一个写。
自身属性：width、height、margin、padding、border、background。
文本属性：color、font、text-decoration、text-align、vertical-align、white-space、break-word。
其他属性(CSS3) ：content、cursor、border-radius、box-shadow、backgrouund:linear-gradient...