侧边栏壁纸
  • 累计撰写 22 篇文章
  • 累计收到 1 条评论

CSS

admin
2022-06-13 / 0 评论 / 2 阅读 / 正在检测是否收录...

问题1111

  1. CSS3新特性?
  2. CSS中animation和transition的区别?
  3. 常见的布局样式?
  4. 二栏布局和三栏布局?
  5. 选择器优先级以及权重?
  6. css可以继承的属性?
  7. 块元素、行元素、行内快元素?
  8. px,em,rem,vw+vh区别?
  9. Overflow?
  10. 左边定宽,右边自适应---二栏布局?
  11. 左右固定,中间自适应---三栏布局?
  12. 三栏平均分布?
  13. 盒子绝对水平垂直居中?
  14. 图片水平垂直居中?
  15. 文字水平垂直居中?
  16. css画三角形和圆形?
  17. css提高页面性能的办法?
  18. 水平方向的布局规律?
  19. 解释line-hight与行距?
  20. 盒子模型?
  21. 浮动?
  22. 定位?
  23. 伪类伪元素?
  24. 高度塌陷与边距重叠?
  25. IFC?
  26. BFC?
  27. 移动端适配?
  28. Flex布局?

答案:

CSS3新特性
选择器(伪类,伪元素,nth-child()) 阴影(box-shadow) 背景与渐变 过渡 变化 动画
媒体查询@media 颜色透明度rgba 圆角 border-radius 旋转倾斜位移 transform

CSS中animation和transition的区别
Animation是动画功能,通过控制关键帧来控制动画的每一步,实现动画效果
Transition是过渡功能,可以让css变得平滑。因为原生的css过渡在客户端需要处理的资源比js和flash少得多,所以才更加平滑
区别: Transition需要借助交互,Animation可以自动播放也可以借助交互。
Transition只能定义开始和结束状态,Animation除开始结束状态,还可以通过关键帧控制中间形态。
Transition不能暂停播放,Animation可以。

变换 translate() 根据xy轴的移动 scale()缩放 rotate()3d变换

渐变
background:linear-gradient(方向,开始颜色,结束颜色)

布局样式
静态布局:传统网页采取的布局方式,一切元素都是以px做单位,适用于pc端
流式布局:页面元素的宽度按照屏幕的分辨率进行适配调整,但整体布局不变(高宽大部分设置成百分比,可以设置宽高的最大最小值)
Table布局:优点-表格中内容可以自动居中 缺点—table比其他标记占更多的内存(下载慢),table会阻挡浏览器渲染引擎的渲染顺序(延迟页面生成速度)。
Flex布局:弹性盒子布局,能够解决元素居中,并且自动弹性伸缩,适配不同的屏幕。包裹文字的各元素采用em/rem做单位,而页面的主要划分区域尺寸仍采用百分数或者px,适用于移动端
Grid布局:将容器划分为行和列,产生单元格,然后指定项目所在的单元格。
Float布局:脱离文档流不脱离文本流,文字环绕 缺点:高度塌陷

自适应布局:多个静态布局的,每个静态布局对应一个屏幕分辨率范围,需要开发多套界面,屏幕太小内容会拥挤。
响应式布局:创建多个流式布局,分别对应一个屏幕分辨率范围。能够在不同屏幕不同分辨率上实现不同的展现方式,只需要一套界面就够,屏幕会根据屏幕宽度调整设计。适用于pc端和移动端兼容,加meta标签,例如width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。使用rem,还能根据特定的media定制样式

元素(标签)选择器
选择一个标签对样式进行改变
Id选择器
给标签添加一个 id=‘XX’ 可以多个id命同样的名(但是一般不重复),选择的时候用#加id
类选择器
class=‘XX’ 选择的时候用 .加class class名字可以重复,也可以一个标签用多个不同名称的class,写的时候用空格隔开。
通配选择器
选择所有的元素
直接用*

选择器优先级
!import
内联样式 style=‘xx’ 1000
Id选择器 0100
类,伪类,属性选择器.conent 0010
类型div选择器,伪元素选择器 0001
通配符 子选择器 后代选择器 0000
继承最低

权值相等,后出现优先

css的继承 可以继承的属性:
字体
font-family:规定元素的字体的系列,楷书行数等
Font-size: 字体大小 px
Font-weight:字体粗细
Font-style:字体的风格 斜体
Font-variant:小写字母变大写,原本的大写字母变大一点
文本
Text-align:文本对齐方式 center left right justify 两端对齐 inherit 继承父类
Text-indent:文本缩进
Line-height:行高 line-height == height 文字上下居中显示
Text-transform:大小写展示的方式
间隔 Letter-spacing word-spacing
可见性 visibility 光标属性 cursor
块元素:
独占一行,高、宽、行高、margin,padding都可设置,宽度不设置默认父元素的
div p h ul table li form...
行元素(内联元素): 行内元素自身没有行高这个属性
一行多个,高、宽、行高、margin和padding的top和bottom不可设置,(padding的top和bottom仅本身有效,但是不会撑开父盒子)但是left和right可以设置,元素的宽度高度就是包含的问题图片的宽度,不能变。行高其实可以设置,因为设置后只有位置发生了变化,但是并没有改变盒子的大小,所以在给行内元素设置背景的时候,还是默认的高度有背景。不会换行。(img虽然是行内元素,但是设置margin和padding都有效)
Span a em b strong
内联块元素(行内块元素):
一行多个,可以设置
转换:
(1)display:inline;转换为行内元素;
(2)display:block;转换为块状元素;
(3)display:inline-block;转换为行内块状元素。

Px,em,rem,vw+vh的区别(一绝三相)
Px 绝对单位,网页开发的基本长度单位
Em 相对单位,相对于父元素字体大小进行计算(相乘)--没有当前盒子字体大小则是浏览器默认的
Rem 相对单位,相对于根元素html字体大小进行计算(相乘)----没有当前盒子字体大小则是浏览器默认的
Vm+vh 相对单位,相对当前网页视口宽度和高度进行计算

Overflow是当元素溢出这个元素框的时候的选择,不一定是本身,也有可能是自己的子元素

Css实现左边定宽,右边自适应的方法,二栏布局
Calc函数---可以计算宽度,例如100%-100px
左盒子浮动,右盒子加margin-left(左边盒子宽度)
左边盒子浮动,右边盒子包括一个div,然后div设置overflow:hidden(触发BFC)(否则左边盒子会遮盖住右边的)
子(左边盒子)绝父相,left,top设置为0(实测这个不设置也可以)。右边盒子加margin-left(左边盒子宽度)
最大的盒子设置display:flex; 右边盒子flex:1;(占满flex剩余的空间)
最大盒子设置display;table; 左右盒子设置display:table-cell;

Css实现三栏布局,左右固定,中间自适应
1 左盒子左浮动,右盒子又浮动,最大盒子必须有尺寸,然后中间盒子设置margin-left和margin-right为左右盒子的宽度(此种方法注意盒子排列顺序是左右中)
2 大盒子加display:table,左中右加display:table-cell
3 大盒子相对定位,左右盒子绝对定位并且设置top left right,中间盒子设置绝对定位后设置left和right,分别是左右盒子的宽度(中间盒子也可以设置浮动)
4 大盒子display:flex,中间盒子flex:1

三栏布局平均分布
大盒子display:flex,剩余盒子flex:1

css实现绝对居中
定宽高
父盒子加相对定位,子盒子绝对定位,left、top 50%,margin-left、margin-top (子盒子宽高的一半,这里移动的是负值)px---------首先利用定位让子盒子左上角的点在父盒子中心,然后利用margin微调
父盒子加相对定位,子盒子绝对定位,offset的偏移量(top,left,right,bottom)全设置为0,margin设置为auto,这样margin会自动变化,从而调整到中间
不定宽高
父盒子加相对定位,子盒子绝对定位,left、top 50%,transform:translate(50%,50%)---------首先利用定位让子盒子左上角的点在父盒子中心,然后使用transform属性
父盒子display:table-cell,text-align:center, vertical-align:middle; 子盒子display:inline-block
父盒子display:flex; justify-content:center; 子盒子align-self:center(或者父align-items:center)

图片垂直居中
要先让div包裹一个盒子,这个div在被最外部的div包裹----最外层div设置display=table,img的父元素div设置display=table-cell,vertical-align: middle;
第二种办法是div直接包裹了图片。通过利用定位,再给图片元素设置top:50%,transform:translateY(-50%)
图片水平居中
上面基础上再给最外层div元素添加text-align:center
上面基础上再给图片元素添加left和transform

文字水平居中Text-align = center 文字垂直居中line-height = height

css画三角形
Border: 10px solid transparent; transparent--继承父元素颜色
Border-top:10px solid red; top为下三角

Css画圆形
Border-radius:50%
Width:80px
Height:80px
Bgc:xxx

Css提高页面性能
1属性设置用简写 margin的top、bottom等写成margin:10px 20px 30px.. 减少打包体积
2用css替换图片 减少http请求节省带宽
3删除不必要的零和单位 0.2=.2 减少打包体积
4用精灵图代替单个文件加载 减少http请求节省带宽

水平方向的布局规律
Overflow:visible溢出部分显示,hidden隐藏(会裁剪),scroll生成垂直水平两个滚动条,
Auto根据需要生成滚动条。 Overflow-x Overflow-y 单独处理水平或者垂直
一个元素在其父元素中,必须满足margin+border+padding = 父元素内容区的高度
假设父元素width=800,height=400
子元素宽度等于200,会自动将margin-right变成600
Width,margin-left,margin-right任意一个为auto,就会调整这一个的值
如果width与margin都是auto,则width填满,margin是0
margin-left,margin-right是auto,width固定,则子元素会居中 即margin:0 auto;

l4ciz2zw.png

盒子模型是css定义的一个模块,是一个长方形的盒子,实质上是包含了html元素的框。
从里到外顺序:内容区 content 内边距 padding 边框border 外边距 margin 从里到内顺序
内容区是由width和height控制 如果盒子中没内容则不显示。
边框区的设置至少三个样式 border-width border-color border-style(线条的样式)
分为标准盒模型和IE盒模型
Box-sizing:context-box border-box(width和height包含padding和border)
Margin值的顺序,逆时针,不够4个则对称

浮动
Float: left right
某元素浮动后,字体不会浮动上去,会围绕浮动的元素
清除浮动:
可以在不想受浮动影响的元素增加clear属性,可选值是left、right、both。分别是不受左右浮动影响和不受最大的那个浮动的影响。
原理:给该元素增加了外边距

定位(position) relative相对(相对自身) absolute绝对(选择其最近的父级定位元素,当这个父级是static的时候,绝对定位元素会以body坐标原点进行定位) fixed 固定(相对浏览器窗口定位,不随滚动条改变) sticky粘滞(在元素到达某一位置时将元素固定)
定位的默认值是static 相对定位不会脱离文档流,其他都会,可以使用z-index改变层叠
1 开启定位后,可以通过偏移量(offset)来设置元素位置----top,bottom,left,right
2 单一的绝对定位会定位到网页的左上角

伪类
:hover :active :visited :link :visited 等类似属性,能够在元素到达某种状态的时候得到某个样式或者失去某个样式的称为伪类。

伪元素
创建一些不存在于文档中的元素
.box::after{content:’ ’ } (在box元素的末尾添加东西)
.box::before (在box元素的开头添加东西)

IFC
内部盒子水平排列 影响布局的有 font-size line-height height vertical-align

BFC概念
1 内部盒子会垂直排列 2 属于同一个BFC的相邻盒子边距仍会重叠
3 不会与浮动区域重合 4 容器里面元素与外面元素互不影响
5 计算BFC高度的时候浮动元素也计算在内

开启BFC后
不会边距重叠,不会塌陷,开启BFC的元素可以包含浮动元素
1 float 2 absolute fixed 3 inline-block table-cell 4 overflow

高度塌陷 垂直外边距重叠(水平的不会)
高度塌陷是指子元素浮动(也就是脱离文档流)后,父元素的高度没有人撑开了,就会塌陷。
解决方式一:开启BFC(指把这块元素开创一个独立的布局空间)
垂直外边距重叠指块元素的外边距会发生重叠,边距取两者之间最大值。有三种情况:1同级别垂直两个元素设置的上边距或下边距,边距不会叠加而是最大值 2子元素设置margin时会传递给父元素的margin 边距虽然重叠了但是各自边距的值没变
解决边距重叠:(开启BFC或使用fixed或absolutely)
1 开启BFC的元素不会被浮动元素所覆盖
2 开启BFC的元素子元素和父元素的外边距不会重合(当子元素设置margin值的时候,margin的值会传递给父元素,从而导致父元素也要移动,而子元素的相对位置没有变化,解决这个问题主要是要让子元素的不挨着父元素的边)
3 开启BFC的元素可以包含浮动的子元素,开启后都可以清除浮动
开启方式(也是清除浮动的几种方式):
1 父元素的overflow(滚动条)设置成一个非visible的值(一般设置成hidden或者auto)
2 float:left; or position:absolute; or display:inline-block 都是通过脱离文档流开启
解决方式二:在父元素中在增加一个div,然后给其增加clear属性,这样会不受浮动的影响在浮动元素的下面,也会撑大父元素到这个位置,缺点是多了一个div
解决方式三:通过伪元素::after解决,给父元素增加一个::after属性,此时会在最后为父盒子增加内容,但是由于::after是行级元素,会在同一行,所以将其转变成块元素,最后在增加clear:both;(清除浮动),达到效果。 清除浮动是清除浮动对当前元素的影响
.box::after{content:’ ’; display:block; clear:both}
这个方式可以同时解决高度塌陷和外边距重叠的问题。通过在前后都增加空内容,添加间隔,
display采用table表格的形式

移动端适配

  1. 使用media媒体查询,让不同屏幕的分辨率加载不同的css代码(代码量大)
  2. Flex弹性布局
  3. 使用rem,因为rem是相对于根元素字体大小计算的
  4. 等比缩放(字体也会越来越大或者越来越小,体验差)
  5. 使用vw,vw是相对单位,1vw表示屏幕宽度的1%
    布局自适应的几种方案 要区分不同型号版本分辨率。响应式布局,弹性布局,流式布局(百分比布局),使用rem 把px换算成vw
    需要等比缩放的元素用
    调试平台 浏览器 safari uni-app

Flex布局
水平的主轴和垂直的交叉轴
Flex-direction:row row-reverse column column-reverse 排列顺序
Flex-wrap:nowarp wrap wrap-reverse 如何换行
Flex-flow: Flex-direction和Flex-wrap的简写
Justiy-concent:flex-start flex-end center space-between(两端对齐,项目之间间隔相等) space-around(项目两个间隔相等,所以项目中间比两侧宽两倍) 主轴上对齐方式
Align-items:stretch(默认值,是占满) flex-start flex-end center baseline(项目第一行文字基线对齐) 交叉轴对齐方式
Alige-content: stretch flex-start flex-end center space-between space-around 多根轴线对齐方式
项目的属性
Order:项目排列顺序(数字越小排列越前) 默认是0
Flex-grow: 默认是0,1的话代表占满剩余空间
Flex-shrink: 默认是1,空间不足时等比例缩小。 0代表不缩小
Flex-basis: 项目主轴的值(即项目的占据的空间,默认为项目的大小,设置后将占据固定空间) 默认是auto
Flex: Flex-grow, Flex-shrink, Flex-basis 结合
Align-self:单个项目的对齐方式 auto(继承父元素的) flex-start flex-end center baseline stretch

0

评论 (0)

取消