CSS
关注
分享
扫一扫
Xaire
简简单单做自己该做并喜欢的事情。
展开
-
CSS的border、cursor、box-shadow
border属性对应的样式：cursor参考属性 box-shadow调试工具原创 2018-11-15 18:25:09 · 364 阅读 · 0 评论 -
float元素对父元素高度的影响，img、a及浏览器之间兼容性问题
问题一：子元素float后导致父元素高度不能自适应计算解决办法：. 浮动会让子元素脱离文档流，当所有元素都脱离时，此时父元素没有设置高度，导致父元素高度为0 给父元素添加overflow:hidden;会清除所有子元素的浮动，然后进行自适应高度计算，因为父元素没有设定高度，所以不会裁剪 问题二： img是内联元素，但是其本身有宽...原创 2019-08-22 12:12:21 · 536 阅读 · 0 评论 -
解决float属性影响后续元素排版的问题
一：解决后续元素不会另起行显示： 1.在该元素后面新加div 2.并设置clear:both属性二：早期版本的IE在float中的BUG： 1.块元素 2.float: left; 3.margin-left不为0 margin-left会double 解决办法是：...原创 2019-08-19 15:44:18 · 1748 阅读 · 0 评论 -
CSS弹性盒子布局flex
使用flexbox布局的文档区域称为flex容器。要创建Flex容器，我们将区域容器的display属性值设置为flex或inline-flex。一旦我们这样做，该容器的直接孩子就会成为弹性物品。与CSS中的所有属性一样，定义了一些初始值，因此在创建Flex容器时，所有包含的flex项将按以下方式运行。display: flex|inline-flexflex-direction: row...转载 2019-06-15 16:48:52 · 204 阅读 · 0 评论 -
CSS样式优先级
一、层叠什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）：重要性（Importance） 、专用性（Specificity）、源代码次序（Source order）1.层叠性 可以为一个元素定义多个样式，当样式属性不冲突时，可以同时将这些样式应用到元素上 div{ color:red; ...原创 2019-05-23 17:43:18 · 6342 阅读 · 0 评论 -
CSS属性值
属性值：如果你想让一个元素完全去除外边框和内边框，你可以只使用无单位的0——因为0就是0，不管单位是什么！margin: 0;像素 (px) 是一种绝对单位（absolute units），因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。line-height，设置元素中每行文本的高度。你可以使用单位设置特定的行的高度，但使用一个无单位的值往往更容易，它就...原创 2019-05-23 16:30:14 · 1007 阅读 · 0 评论 -
CSS工作原理到CSS选择器
CSS的工作方式：当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：浏览器将HTML和CSS转化成DOM（文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。 浏览器显示DOM 的内容。使用CSS的三种方法：1.外部样式表：在同一目录中创建css.css文件，<link rel="stylesheet" ...原创 2019-05-23 14:52:13 · 387 阅读 · 0 评论 -
获取浏览器中的默认字体
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compa...原创 2019-05-24 18:14:34 · 3330 阅读 · 0 评论 -
CSS盒子模型相关的一些边距处理
注意: 还有其他属性可以更巧妙地处理内容的大小——设置大小约束而不是绝对的大小。这些属性包括min-width、max-width、min-height和max-height。外边距：围绕在元素边框外的空白距离，就是外边距，也能表示当前元素与其他元素之间的空白距离 （1）.语法 属性： margin 定义某个元素四个方向的外边距 margin-t...原创 2019-05-24 17:41:29 · 459 阅读 · 0 评论 -
媒体查询实现响应式设计的三种方法
方法一：利用Link标签从外部引入文件<link rel='stylesheet' media='screen and (min-width:1000px)' href='./css/over1000.css'>方法二：用import导入文件：@import url('style.css') only screen and (min-width: 500px);方法三：直接...原创 2019-03-23 20:56:44 · 1885 阅读 · 0 评论 -
面包菜单收起和出现案例
参考：相关教程js中的classList、toggle用法<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1...原创 2019-03-08 22:58:43 · 736 阅读 · 0 评论 -
CSS颜色-RGB 16进制、浏览器中自带取色器的使用方法
RGB与16进制色在线互转十六进制到 RGB 转换应用 CSS 长度优达学城HTML、CSS基础视频利用开发者工具的取色器吸取当前页面色码：原创 2018-11-15 17:34:04 · 2711 阅读 · 0 评论 -
block，inline和inlinke-block细节对比
block，inline和inlinke-block细节对比参考：diaplay的inline、block、inline-block对比display:block block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 bloc...原创 2019-03-08 21:31:38 · 138 阅读 · 0 评论