CSS
关注
分享
扫一扫
瓜冬瓜
我想找份实习，额啊~
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS绝对定位absolute元素的初始包含块不是body元素，也不是html元素
position为relative/fixed/absolute的元素会相对于距离最近的position为relative/fixed/absolute的上级元素进行定位，如果上级元素都没有position属性，那么则相对于初始包含块定位。 初始包含块不是body元素也不是html元素，而是html元素的包含块（the initial containing block），指的是以整个 canvas...原创 2019-04-22 17:41:48 · 1285 阅读 · 0 评论 -
网格布局grid
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 基本概念 采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。 行和列的交叉区域，称为"单元格"（cell）。 正常情况下，n行和m列会产生n x m个...转载 2019-08-30 02:06:37 · 364 阅读 · 0 评论 -
CSS3新增了哪些特性
边框: border-radius：为元素添加圆角边框，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性； border-radius: 10px; /* 等价于 */ border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 1...原创 2019-08-28 02:02:03 · 2700 阅读 · 0 评论 -
多媒体查询@media
定义 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 @media not|only mediatype and (expressions) { /* CSS代码写在这里 */ } /* 示例 */ /* only去掉效果一样 */ @media only screen and (max-width:...原创 2019-08-27 01:34:35 · 1496 阅读 · 0 评论 -
页面导入样式时，使用link和@import有什么区别？
用法区别： <!-- link用法 --> <head> <link rel="stylesheet" href=""> </head> <!-- @import用法一 --> <head> <style type="text/css"> @import url(); </style> &l...原创 2019-08-26 15:54:04 · 194 阅读 · 0 评论 -
如何通过JS获取元素宽高
方法一：DOM节点.offsetWidth/offsetHeight 作用：获取到的是内容区域（content） + 内边距（padding） + 边框（border）的值，输出一个数字。 <style type="text/css"> div{ width: 100px; height: 100px; ...原创 2019-08-22 03:19:31 · 2189 阅读 · 0 评论 -
实现两边定宽，中间自适应布局（三栏布局）的七种方法
浮动法 <style type="text/css"> html,body{ height: 100%; margin: 0; } div{ height: 100%; } .left{ backgr...原创 2019-08-09 05:49:02 · 314 阅读 · 0 评论 -
Flex—弹性布局
什么是Flex布局？ Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 任何一个容器都可以指定为Flex 布局。 .box{ display:flex; } 行内元素也可以使用Flex布局。 .box{ display:inline-flex; } webkit内核的浏览器，必需加上-webkit前缀 .box{ dis...转载 2019-08-08 16:44:12 · 242 阅读 · 0 评论 -
「CSS」常见的清除浮动方法
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷，所以当我们设置float后，需进行相应的清除浮动操作。 方法一：创建BFC BFC的全称为 Block Formatting Context，即块级格式化上下文。一个BFC有如下特性： 处于同一个BFC中的元素相互影响，可能会发生margin collapse（高度塌...原创 2019-08-05 23:12:52 · 95 阅读 · 0 评论 -
让一个元素水平垂直居中的方法
行内子元素的垂直水平居中 通过在父元素中设置text-align: center;，让子元素水平居中，然后通过line-height属性让子元素进行垂直居中。 <style> #parent{ background-color: #000; height: 400px; text-align...原创 2019-08-07 23:34:17 · 308 阅读 · 0 评论 -
CSS权值覆盖规则
CSS权值问题 在处理权值的时候，应该是按照下面的步骤进行的： 会把应用于同一个元素的所有样式声明拿出来 把这些样式分为正常声明和重要声明（声明里面含有！important）两种 如果有重要声明的话，正常声明就不用理他了，对重要声明按照权值进行排序，权值大的排下面 如果没有重要声明的话，就对正常声明按照权值排序，权值大的排下面 权值相同的按照 内联&gt;嵌入&gt;外部 进行排序 顺序执行...原创 2019-06-21 14:20:37 · 473 阅读 · 0 评论 -
边距重叠与BFC
边距重叠 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 两个或多个块级盒子的垂直相邻边界会重合，它们的边界宽度是相邻边界宽度中的最大值。 注意水平边界是不会重合的。 边距重叠例子 父子元素的边界重叠 <style> .parent { background: #E7A1C5; ...原创 2019-05-30 14:27:06 · 197 阅读 · 0 评论 -
CSS 盒子模型（Box Model）
CSS 盒子模型（Box Model） 由content（内容区域），padding（内边距），border（边框），margin（外边距）组成。 有两种标准，一种是标准盒子模型（W3C盒子模型），另一种是IE盒子模型（怪异盒子模型）。 当对一个文档进行布局的时候，浏览器的渲染引擎会根据这两个标准的其中一个将所有元素表示为一个个矩形的盒子。 这两种标准对 height 和 width 的计算方式...原创 2019-05-27 18:38:59 · 1507 阅读 · 0 评论 -
关于子元素连续数字和英文内容溢出父元素的问题
今天在写博客的时候，想写一些代码作为例子进行验证，但是遇到了一个问题。下面是问题代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>例子</title> <style type="tex...原创 2019-05-18 14:41:46 · 342 阅读 · 0 评论 -
CSS定位
CSS定位问题 position的值有static，relative，absolute，fixed和inherit（继承） static和inherit就不说了 先说说absolute absolute position为absolute的元素相对于初始包含块（不知道是body元素还是html元素）进行定位或者另一个position为relative或fixed或absolute的元素进行定位，下...原创 2019-04-23 17:26:02 · 184 阅读 · 0 评论 -
HTML、CSS、JS对unicode编码字符的规则
HTML、CSS、JS对unicode编码字符的规则 HTML、CSS和JS对unicode编码字符的规则是不同的，下面通过一个例子来说明有什么不同 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>例子</title> <scri...原创 2019-04-07 15:32:21 · 947 阅读 · 0 评论 -
Scss基本用法
变量 sass使用$符号来标识变量。变量有作用域，外部不能引用内部变量。在声明变量时可以引用其他变量。变量名可以与CSS中的属性名和选择器名称相同，推荐使用中划线分隔。 $border-width: 1px; $border: $width solid black; div { border: $border; } //编译后 div { border: 1px solid blac...原创 2019-09-02 15:22:49 · 1161 阅读 · 0 评论