CSS
跨越海沟
这个作者很懒,什么都没留下…
展开
-
重看CSS
这里写目录标题1,CSS选择器:2,使用:3,颜色:4,背景:5,边框: 1,CSS选择器: 2,使用: 3,颜色: 4,背景: 5,边框:原创 2021-12-22 18:25:45 · 66 阅读 · 0 评论 -
CSS块状元素、行内元素、行内块状元素
1,行内元素特征: (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行 2,块状元素特征: (1)能够识别宽高 (2)margin和padding的上下左右均对其有效 (3)可以自动换行 (4)多个块状元素标签写在一起,默认排列方式为从上至下 3,行内块状元素特征: (1)不自动换行 (2)能够识别宽高 (3)默认排列方式为从左到右 ...原创 2021-05-31 15:08:15 · 569 阅读 · 0 评论 -
CSS继承
可以继承的属性很少,只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承。 所有元素可继承:visibility和cursor。 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 终端块状元素可继承:text-in原创 2021-05-27 20:38:09 · 304 阅读 · 1 评论 -
CSS选择器权重
一般来说,选择器的优先级(从上往下依次降低)是: 1,在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。 2,作为style属性写在元素内的样式 3,id选择器 4,类选择器/伪类选择器: 伪类选择器和类选择器的优先级是一样的,谁在后面谁起作用,因为后面的样式会覆盖前面的样式 5,标签选择器 6,通配符选择器 ...原创 2021-05-27 20:33:47 · 67 阅读 · 0 评论 -
rem布局
1,定义: (1)rem:相对于根元素的字体大小的单位 (2)em:相对于父元素的字体大小的单位 一个rem等于html标签font-size所对应的像素值 2,如何动态设置html的font-size: (1)媒体查询 (2)JS动态设置:获取屏幕值 html.style.fontSize = document.documentElement.clientWidth / 系数+‘px' (3)CSS动态设置:vw单位: html{ font-size:20vw; } 3,如何将px转换为rem原创 2021-02-21 21:08:00 · 116 阅读 · 0 评论 -
让不定宽元素垂直居中
前情提要:margin:auto默认支持水平居中,不支持垂直居中 (1)关键词:grid: 父元素:display:grid,子元素:margin:auto (2)关键词:flex: 父元素:display:flex,子元素:margin:auto (3)关键词:translate: 父元素:position:relative,子元素:position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) ps,-50%是元素自身50%的距离 (4原创 2021-02-20 18:15:39 · 55 阅读 · 0 评论 -
BFC
(1)是一种布局规范。具有BFC特性的元素可视作独立容器,容器里的元素在布局上不会影响到外部元素 (2)触发BFC的条件: a,浮动元素:float除none以外的值 b,绝对定位元素:position(absolute、fixed) c,display值为inline-block、table-cells、flex d,overflow除visible以外的值 (3)适用情景: a,解决margin叠加的问题: eg,margin-bottom:30px + margin-top:50px->取50p原创 2021-02-20 18:14:52 · 71 阅读 · 0 评论