Css相关问题

小源碎碎冰

已于 2023-05-25 09:11:45 修改

阅读量46

点赞数 1

文章标签： html5 css

于 2023-05-11 11:55:31 首次发布

本文链接：https://blog.csdn.net/weixin_67637903/article/details/130614368

版权

目录

一、说说对盒子模型理解？

二、如何让一个盒子水平垂直居中,有哪些方法越多越好？

三、Css性能优化有哪些常见的方法？具体如何实现？

四、Css选择器有哪些？优先级是什么？哪些属性可以继承？

五、CSS3新增的常用属性？

六、关于flex布局？

七、@import和link有什么区别？

一、说说对盒子模型理解？

当对一个文档进行布局(layout)，浏览器的渲染引擎会根据标准之一的CSS基础框盒模型(CSS basic box model)，将所有元素表示为一个个矩形的盒子(box)

        盒子模型分为：W3C标准盒子模型，IE怪异盒子模型

盒模型都是有四部分：margin、border、padding、content。

标准盒模型和IE盒模型区别在于width,height的范围不同：

标准盒模型的width,height属性范围只包含了content。

IE盒模型的width,height属性范围包含了border,padding,content。

可以通过修改box-sizing属性来改变元素的盒模型：

box-sizing:content-box; 表示标准盒模型(标准值)

box-sizing:border-box; 表示IE盒模型(怪异盒子)

二、如何让一个盒子水平垂直居中,有哪些方法越多越好？

绝对定位居中
负margin居中
margin固定宽高居中
flex居中
transform居中
table-cell居中
绝对定位百分数

绝对定位居中：是利用绝对定位，让他的top,left,right,bottom为0可以实现垂直居中
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}
.chl_box {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: #00FFFF;
}
负margin居中：前提是需要知道固定的宽高，限制比较大
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}

.chl_box {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	background: #00FFFF;
}
margin固定宽高居中:必须知道宽高，不灵活
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
}

.chl_box {
	width: 100px;
	height: 100px;
	margin: 50px 50px;
	background: #00FFFF;
}
flex居中：通过flex布局，来实现垂直居中
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.chl_box {
	width: 100px;
	height: 100px;
	background: #00FFFF;
}
transform居中：IE9一下浏览器不支持
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}

.chl_box {
	width: 100px;
	height: 100px;
	background: #00FFFF;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
table-cell居中：将父元素转换成表格。
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	display: table-cell;
	vertical-align: middle;
}

.chl_box {
	width: 100px;
	height: 100px;
	background: #00FFFF;
	margin: 0 auto;
}
宽高不确定：比较灵活，保证left,right的百分比一样可以实现水平居中，top，bottom的百分比一样可以实现垂直居中。
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}

.chl_box {
	background: #00FFFF;
	position: absolute;
	left: 25%;
	right: 25%;
	top: 25%;
	bottom: 25%;
}

三、Css性能优化有哪些常见的方法？具体如何实现？

减少文件大小·缩小CSS文件大小可以加快加载速度，可以通过压缩CS代码、删除不必要的注释和空格来实现。
避免使用后代选择器：后代选择器会导致性能下降，因为它会遍历文档中所有元素。使用特定的选择器可以更快地匹配需要样式的元素。
避免使用@import-在CSS中使用@import指令会增加页面的加时间，建议将多个CSS文件合并为一个文件，或使用链标签<link》在HTML中分别链接到它们，
使用缓存使用浏览器缓存可以减少重复下载CSS文件的次数，从而提高网站性能。
限制嵌套层级 - 每个层级都需要计算和渲染，所以限制层级可以提高性能。
避免使用昂贵的居性·一些属性比其他居性更昂贵，例如box-shadow和border-radius，尽虽游免使用这些居性，或者仅在必要时使用
减少使用浮动 - 浮动元素的渲染会降低性能，因为它们需要计算和重新布局。
使用Flexbox或Grid布局 - Flexbox和Grid布局可以减少对多余HTML和CSS的需求，提高性能。
避免使用!important - 在CS中使用!important会爱益所有其他样式，并且会增加计算时间，影响性能。
使用媒体查询 - 媒体查询可以根据设备特征加载不同的样式，减少不必要的下载和渲染

四、Css选择器有哪些？优先级是什么？哪些属性可以继承？

id选择器（#box），选择id为box的元素

类选择器（.one），选择类名为one的所有元素

标签选择器（div），选择标签为div的所有元素

后代选择器（#box div），选择id为box元素内部所有的div元素

子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素

相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素

群组选择器（div,p），选择div、p的所有元素

伪类选择器

伪元素选择器

属性选择器

优先级：

内联 > ID选择器 > 类选择器 > 标签选择器

继承属性：父元素设置一些属性，后代元素可以自动拥有这些属性，分为：字体系列，文本系列，元素可见性，表格布局，列表，引用，光标
字体系列
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
文本系列
text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
元素可见性
visibility
表格布局
caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定
列表属性
list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合
引用
list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合
光标
cursor：箭头可以变成需要的形状

五、CSS3新增的常用属性？

选择器：CSS3引入了很多新的选择器，例如属性选择器、伪类选择器、伪元素选择器等，可以更精确地选取页面上的元素。

@font-face：允许开发者在网页中使用自己定义的字体。这个特性解决了网页字体的局限性问题，提供了更丰富的字体选择。

媒体查询（Media Query）：允许页面根据屏幕尺寸、分辨率等参数来调整样式或布局。媒体查询使得响应式布局得以实现。

边框（Border）：CSS3中新增了很多边框的样式，例如圆角边框、阴影边框、边框图片等，可以让页面的边框样式更加丰富多彩。

过渡（Transition）和动画（Animation）：CSS3中新增了过渡和动画的支持，可以通过CSS来实现简单的动画效果，使网页变得生动有趣。

弹性盒模型（Flexbox）：弹性盒模型是CSS3中一个重要的布局方式，可以让网页的布局更加灵活和自适应。

六、关于flex布局？

Flex布局是CSS3中新增的一种基于弹性盒子模型的布局方式，它可以让页面的排版更加方便、灵活和自适应。相比传统的块级布局和行内布局，flex布局的优势在于能够适用于各种尺寸的屏幕和设备，并且可以通过简单的CSS属性来实现复杂的布局。

常见的Flex布局属性包括：

display:flex;：设置容器为flex布局

flex-direction: row | row-reverse | column | column-reverse：设置主轴方向，从而控制子元素的排列方式

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly：定义主轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch：定义侧轴上的对齐方式

flex-wrap: nowrap | wrap | wrap-reverse：控制子元素是否换行，以及换行后的排列方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch：在多行情况下，定义多根轴线的对齐方式

使用场景：

页面整体布局：使用Flex布局可以轻松实现页面整体布局，从而提高页面的整体美观度和易用性。

列表等组件的排列方式：使用Flex布局可以轻松实现各种排列方式，例如居中对齐、等间距排列等。

响应式布局：使用Flex布局可以根据屏幕尺寸来动态调整页面元素的排列方式，从而实现响应式布局。

总的来说，Flex布局是一种非常强大的CSS布局方式，可以方便地实现各种排列方式和布局效果，在实际项目中应用广泛。

七、@import和link有什么区别？

@import和<link>标签都可以用来导入CSS文件，但它们之间有以下几个区别：

加载方式：<link>标签在页面加载时同时加载CSS文件，而@import语法是将CSS文件嵌套到HTML中，因此需要等HTML页面加载完毕，再去加载CSS文件。

兼容性：<link>标签无兼容问题， @import语法在IE5/6下不支持，以及在某些浏览器下可能会出现闪烁或者未渲染的情况。

权重不同：在CSS渲染中，<link>标签引用的CSS文件的权重高于@import导入的CSS文件。因此如果同时有相同选择器的样式定义，后面的样式会覆盖前面的样式。

适用范围：<link>标签可以指定media属性来加载不同的CSS样式文件，而@import语法只能加载一个CSS文件，并且只能在CSS文件的开头使用。

综上所述，<link>标签更常用于引入外部CSS文件，而@import语法更多用于在一个CSS文件中引入其他CSS文件，或者当需要按需加载某些CSS文件时使用，但需要注意其兼容性和权重问题。