随笔分类 -  CSS

清除浮动
摘要：什么是浮动 在普通流中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的， 在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。 如果没有特殊样式指定，所有元素默认都是按照普通流方式排列布局，即普通流中元素的位置由该元素在 HTML 文档中的位置 阅读全文
posted @ 2020-10-27 21:22 CHUNYIN 阅读(154) 评论(0) 推荐(0)
三栏布局
摘要：左右浮动布局 使用: 左设置为左浮动,右设置为右浮动,中间margin-left为左边块的宽度,margin-right设置为右边块的宽度. 注意: 在body标签中,设置中间为文档流的最后一项 <!DOCTYPE html> <html lang="en"> <head> <meta charse 阅读全文
posted @ 2020-10-18 21:35 CHUNYIN 阅读(83) 评论(0) 推荐(0)
flex布局
摘要：flex布局(Flexible布局, 弹性布局) 重要概念: 开启flex布局的元素叫做 flex container flex container 里面的直接子元素叫做 flex items 如何开启flex布局:? 设置display属性为flex或者inline-flex 可以成为flex c 阅读全文
posted @ 2020-09-14 15:55 CHUNYIN 阅读(233) 评论(0) 推荐(0)
最后一个元素的margin处理
摘要：问题: 在进行布局的时候,同一个元素摆放后,设置margin-right让他们之间产生间距,那么最后一个元素的margin-right总是多于的 解决办法: 方法一: 每一行的最后一个元素,总是加一个class,通过类选择器去除这个margin-right 方法二: 通过伪类选择器,但是具有兼容器问 阅读全文
posted @ 2020-09-13 17:11 CHUNYIN 阅读(1204) 评论(0) 推荐(0)
标准流(Normal Flow) 与定位position , 脱离标准流
摘要：标准流(Normal Flow) 默认情况下,元素都是按照normal flow(标准流, 常规流, 正常流. 文档流(document flow)) 从左到右,从上到下按顺序摆放好 默认情况下,互相之间不存在层叠现象 在标准流中,可以使用margin, padding对元祖进行定位 margin还 阅读全文
posted @ 2020-09-12 11:24 CHUNYIN 阅读(2172) 评论(0) 推荐(1)
光标展示样式cursor
摘要：cursor 可以设置(鼠标指针)光标在元素上面的显示的样式 cursor 常见的设值有: auto :浏览器根据上下文决定指针的显示样式,比如根据文本与非文本切换指针样式 default: 由操作系统决定,一般是一个小箭头 pointer: 一只小手, 鼠标指针挪动到;链接上面默认就是这个样式 t 阅读全文
posted @ 2020-09-12 11:04 CHUNYIN 阅读(417) 评论(0) 推荐(0)
背景background
摘要：background-image:设置元素的背景图片 会盖在background-color 的上面 background-image: url(../img/text.jpg), url(../img/text1.jpg) 设置第一张图片将显示在最上面,其他图片按顺序层叠在下面 注意: 如果设置了 阅读全文
posted @ 2020-09-10 01:01 CHUNYIN 阅读(294) 评论(0) 推荐(0)
浮动float
摘要：绝对定位,浮动都会让元素脱离标准流 none 默认值,不浮动 left 向左浮动 right 向右浮动 浮动规则 元素一旦浮动后,脱离标准流,朝着向左或向右移动,直到自己的边界紧贴着包含快(一般父元素)) 或者其他浮动元素的边界 定位元素会层叠在浮动元素父上面 浮动元素不能与行内级内容层叠,行内级内 阅读全文
posted @ 2020-09-09 00:30 CHUNYIN 阅读(170) 评论(0) 推荐(0)
盒子模型
摘要：HTML每个元素都可以看做一个盒子, 盒子包括 content,padding,border,margin 方向 :top, right, bottom, left 内容相关属性: width:宽度 min-width :最小宽度,浏览器窗口小于最小宽度是,可以滚动查看 max-width : 最大 阅读全文
posted @ 2020-09-08 12:50 CHUNYIN 阅读(123) 评论(0) 推荐(0)
css属性-元素类型
摘要：根据显示方式 块级元素(block-level elements) 独占父元素的一行 可以设置宽高 div /h1~h6/ul/ol/li/p//pre/table/form/ 行内级元素(inline-level elements) 多个行内级元素在父元素可以同行显示 span/strong/im 阅读全文
posted @ 2020-09-08 10:16 CHUNYIN 阅读(180) 评论(0) 推荐(0)
列表与表格
摘要：列表 有序列表 ol li 无列表 ul li 自定义列表 dl dt dd ol ul 的直接子元素只能是li <ol> <li>有序项目1</li> <li>有序项目2</li> <li>有序项目3</li> <li>有序项目4</li> </ol> <ul> <li>无序项目1</li> <l 阅读全文
posted @ 2020-09-03 16:06 CHUNYIN 阅读(286) 评论(0) 推荐(0)
css特性: 继承和层叠
摘要：继承:inherited 1..一个元素如果没有设置某属性的值,就会跟随父元素的值 2.. 当然,一个元素如果有设置某属性的值,就会使用自己设置的值 3.. 比如color .font-size等属性是可以继承的 4.. 可以用 inherit强制继承 5.. css继承的是计算值 层叠 css允许 阅读全文
posted @ 2020-09-03 13:07 CHUNYIN 阅读(184) 评论(0) 推荐(0)
CSS基本知识
摘要：CSS3:是CSS2.X ，某些模块升级文档说明： 新手可观：https://www.w3school.com.cn/ w3c官网：www.w3.org 推荐：https://www.w3.org/TR/CSS22/propidx 可翻译中文：https://developer.mozilla.or 阅读全文
posted @ 2020-09-01 18:52 CHUNYIN 阅读(287) 评论(0) 推荐(0)