CSS总结---持续更新中 2022.8.4

一、CSS样式

1.引入方式

有标签样式（直接写在标签里）
有内部样式（写在里的style，也包括标签样式，写在html文件内部的样式）
有外部样式（通过 href=“” 引入）
行内样式
1. 优点：权重高，精准
2. 缺点：代码冗余，效率低下，不可复用，扩展性差，难以优化
内部样式：
1. 写在style标签中
2. 少量样式代码时使用
3. 优先级整体比外部高
外部样式：
1. 创建一个.css的文件
2. 写入的内容：选择器{属性：属性值；。。。}

优先级:行内>内部>外部

使用方式

选择器{属性：属性取值；}

2.常用的css属性

font-size: 40px 字体大小
color: red; 字体颜色的设置
background-color：red；背景颜色的设置
border：10px blue solid；边框的设置
width：100px 设置宽
height：100px；设置高
display：inline-block；元素类型转化

3.背景属性

background-image：url(); 背景图
background-repeat：no-repeat；是否重铺
background-repeat： repeat-x；在x轴上重铺
background-repeat：repeat-y；在y轴上重铺
background-position: 100px 100px; 设置背景图片的位置
background-size：cover；设置背景图片的尺寸，取值为cover铺满元素
background-attachment：scroll；背景图片是否固定

二、选择器

1.基础选择器

例子：

<div class="a" id="b">
</div>

<style>标签选择器：div{}类选择器.a{}id选择器#b{}
</style>

2.后代子代选择器

例子：

<div class="a" id="b"><span></span>
</div>

<style>后代选择器.a span{}子代选择器.a>span{}
</style>

3.伪目标选择器

:first-child

用法：

<div><span>我是长女</span><span>我是次子</span><span>我是老幺</span>
</div>

div span:first-child{font-size: 50px;
}

4.伪目标选择器

:nth-child

div :nth-child(7){font-size: 40px;
}
div :nth-of-type(3){font-size: 40px;
}

5.子代选择器

header>div>span{}

6.后代选择器

空格

header div span{}

id命名和类名命名时的规范

不能是纯数字

也不能是数字开头

不能有#.

可以有-_

建议用英文，也可以用拼音

可以多个词组合比如：header-left、main_nav、wrapCenterMain

三、盒子模型

1.标准盒子

实际大小=内容大小（设置的宽高）+内边距+边框

属性有以下

border: 10px solid;   边框
padding: 20px;   内边距
margin: 160px;   外边距

margin:

            /* 外边距取一个值：上下左右都是此值 *//* margin: 200px; *//* 取四个值：上、右、下、左 *//* margin: 0 200px 0 200px; *//* 取两个值：上下、左右。auto自动分配剩余空间 */margin: 0 auto ;

padding 同上

border: 圆角圆形三角形

            /* 圆角边框 *//* border-radius: 50px; *//* 取两个值时，对应左上右下、右上左下*/

当border-radius值等于或大于宽高的一半时，变成圆形，前提是正方形（宽高相等）

三角形：

            width: 0px;height:0px;border: 20px solid;border-color: transparent transparent red transparent;

嵌套型外边距塌陷的解决方法

设置内边距 padding
设置边框 border
设置溢出隐藏 overflow：hidden

CSS总结---持续更新中 2022.8.4相关推荐

最新前端开发面试笔试题及答案---图片（面试题系列持续更新中）（4）
推荐文章: VUE之VUEX常见面试题大全汇总--史上最全[vuex面试题] 前端面试题之HTML+CSS(持续更新)_勤动手多动脑少说多做厚积薄发-CSDN博客1.行内元素和块级元素?img算什么? ...
最新前端开发面试笔试题及答案---图片（面试题系列持续更新中）（8）
推荐文章: VUE之VUEX常见面试题大全汇总--史上最全[vuex面试题] 前端面试题之HTML+CSS(持续更新)_勤动手多动脑少说多做厚积薄发-CSDN博客1.行内元素和块级元素?img算什么? ...
最新前端开发面试笔试题及答案---图片（面试题系列持续更新中）（3）
推荐文章: VUE之VUEX常见面试题大全汇总--史上最全[vuex面试题] 前端面试题之HTML+CSS(持续更新)_勤动手多动脑少说多做厚积薄发-CSDN博客1.行内元素和块级元素?img算什么? ...
最新前端开发面试笔试题及答案---图片（面试题系列持续更新中）（1）
推荐文章: VUE之VUEX常见面试题大全汇总--史上最全[vuex面试题] 前端面试题之HTML+CSS(持续更新)_勤动手多动脑少说多做厚积薄发-CSDN博客1.行内元素和块级元素?img算什么? ...
沉睡者 - 网赚创业VIP项目课程-持续更新中...
沉睡者 - 网赚创业VIP项目课程-持续更新中... 不管在线下还是线上,都尽量只做有积累可持续的项目,否则就容易进入到一个找项目做项目死项目之后,不断重复找项目,不断重复做苦力没有发展的死循环. 在 ...
2020年拼多多校招面试题及答案-最全最新-持续更新中（2）
大家好我是好好学习天天编程的天天一个整天在互联网上种菜和砍柴的程序员~ 2020年拼多多校招面试题及答案-最全最新-持续更新中(2) 2020年拼多多校招面试题一面 2020年拼多多校招面试题一面- ...
【Vue全家桶+SSR+Koa2全栈开发】项目搭建过程整合学习目录（持续更新中）
写在开头大家好,这里是lionLoveVue,基础知识决定了编程思维,学如逆水行舟,不进则退.金三银四,为了面试也还在慢慢积累知识,Github上面可以直接查看所有前端知识点梳理,github传送门 ...
mysql查询更新优化_mysql查询优化(持续更新中)
1.索引不会包含有NULL值的列 (1) 应尽量避免在where子句中对字段进行null值判断,否则将导致引擎放弃使用索引而进行全表扫描 (2) 数据库设计时不要让字段的默认值为null,可以 ...
嵌入式相关开源项目、库、资料------持续更新中
学习初期最难找的就是找学习资料了,本贴精心汇总了一些嵌入式相关资源,包括但不限于编程语言.单片机.开源项目.物联网.操作系统.Linux.计算机等资源,并且在不断地更新中,致力于打造全网最全的嵌入式资 ...

CSS总结---持续更新中 2022.8.4

一、CSS样式

1.引入方式

2.常用的css属性

3.背景属性

二、选择器

1.基础选择器

2.后代子代选择器

3.伪目标选择器

4.伪目标选择器

5.子代选择器

6.后代选择器

三、盒子模型

1.标准盒子

CSS总结---持续更新中 2022.8.4相关推荐

最新文章

热门文章