笔记css

最新推荐文章于 2024-06-13 11:45:00 发布

暖茶纳丁

最新推荐文章于 2024-06-13 11:45:00 发布

阅读量75

点赞数

分类专栏： css

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、盒模型

W3C 的规范：元素内容占据的空间=width ， padding 和 border 值是另算

IE5.X 和 6 ： width=width+padding+border

flex浏览器支持

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

ie9之前的浏览器不支持

参考：https://www.cnblogs.com/yangjie-space/p/4856109.html

2、flex（display：flex）

容器上：flex-direction/ flex-wrap/ flex-flow/ jusitify-content/ align-items/ align-content
子项上：order（小前）/flex-grow（总和1）/flex-shrink（1默认收缩 0不大于1按比例收缩） /flex-basis（auto自动，1XXpx）/flex/align-self
flex：默认（0 1 auto） 1（1 1 0%） none（0 0 auto） auto（1 1 auto）

3、css单位

1.px ：绝对单位，页面按精确像素展示

2.em ：相对单位，基准点为父节点字体的大小，如果自身定义了font-size 按自身来计算（浏览器默认字体是16px ），整个页面内1em 不是一个固定的值。

3.rem ：相对单位，可理解为“ root em ” ，相对根节点html 的字体大小来计算，CSS3 新加属性，chrome / firefox / IE9 + 支持。

4.vw ：视点宽度，视窗宽度，1vw 等于视窗宽度的1％。

5.vh ：视点高度，视窗高度，1vh 等于视窗高度的1％。

6.vmin ：vw 和vh 中较小的那个。

7.vmax ：vw 和vh 中较大的那个。

8.％：百分比

4、css选择器

类，元素，ID，属性等选择器

5、bfc 清除浮动

(1) BFC渲染规则

规则1: 创建了BFC的元素中,在垂直方向上的margin会发生重叠。根元素<html>就是一个BFC元素 (这个可以解释margin重叠)

规则2: BFC元素在页面上是一个独立的容器,外面的元素和里面的元素互不影响。

规则3: BFC元素不会和浮动的元素重叠。(这个可以解释两栏自适应)

规则4: 计算BFC元素的高度时,里面浮动元素的高度也会参与计算 (用来解释overflow:hidden可以清除浮动）

(2) 触发BCF方式

根元素，即HTML标签

浮动元素：float值为left、right

overflow值不为 visible，为 auto、scroll、hidden

display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

定位元素：position值为 absolute、fixed

6、层叠上下文

页面根元素或z-index或css3导致
后来居上/z-index大小来判断
参考：https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

7、常见页面布局

https://www.jianshu.com/p/25346901ff0f

8、响应式布局

使用@media 的三种方式

第一：直接在CSS文件中使用

@media 类型 and (条件1) and (条件二)

{

css样式

}

@media screen and (max-width:980px ) {

body{

background-color: red;

}

第二：使用@import导入

@import url("css/moxie.css") all and (max-width:980px);

第三，也是最常用的：使用link连接，media属性用于设置查询方式

参考：https://blog.csdn.net/weixin_42529699/article/details/81285919

9、css预处理，后处理

Sass、LESS、Stylus

10、css3新特性

animation和transiton的相关属性

animate和translate

11、display哪些取值

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素

参考：http://www.w3school.com.cn/cssref/pr_class_display.asp

12、相邻的两个inline-block节点为什么会出现间隔，该如何解决

方法1: 改变书写方式

方法2：font-size

方法3：使用margin负值

方法4：使用word-spacing或letter-spacing
参考：https://www.jianshu.com/p/b6fb427308ad

13、meta viewport 移动端适配

14、CSS实现宽度自适应100%，宽高16:9的比例的矩形

参考：https://blog.csdn.net/weixin_39357177/article/details/81186498

15、rem布局的优缺点

优点：兼容性高，理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
缺点：不适用内容多的pc端，无法做到高度自适应

16、画三角形

border法：https://www.jianshu.com/p/9a463d50e441

17、1像素边框问题

1. 媒体查询利用设备像素比缩放，设置小数像素

2. viewport + rem 方案

3. 设置 border-image 方案

4. background-image 渐变实现

参考：https://www.jianshu.com/p/fa670b737a29

暖茶纳丁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记css

1、盒模型W3C 的规范：元素内容占据的空间=width ， padding 和 border 值是另算IE5.X 和 6 ：width=width+padding+borderflex浏览器支持目前没有浏览器支持 box-flex 属性。Firefox 支持替代的 -moz-box-flex 属性。Safari、Opera 以及 Chrome 支持替代的 -we...
复制链接

扫一扫