炫酷的CSS
good_moring_
这个作者很懒,什么都没留下…
展开
-
CSS实现水平垂直居中
水平垂直居中居中元素定宽高:1. absolute + margin auto代码实现:<div class="outer"> <div class="inner size"></div></div>.outer { position: relative; width: 300px; height: 300px; border: 1px solid #999;}.size{ width: 100px; height转载 2020-12-16 16:10:07 · 94 阅读 · 0 评论 -
CSS浮动和清除浮动
floatfloat: left :左浮动float: right :右浮动float: none :默认,不浮动。浮动是如何工作的浮动元素会脱离正常的文档流布局,并吸附到父元素的左侧(float: left),在正常布局中本应该位于浮动下的元素就会挤上去,造成重叠。对于文字、图片等内容,浮动元素不会覆盖到这些,这些元素此时会围绕浮动元素填充,就是文字环绕效果浮动元素的一些特性浮动元素在排列时会根据前一个元素的位置来布局右浮动的顺序问题:先出现的最靠右:原因是源代码顺序上,在DO原创 2020-12-15 17:13:18 · 96 阅读 · 1 评论 -
盒模型
盒模型基本概念HTML所有元素都可以看成是一个盒子,它由四个区域组成,分别是内容区域content、内边距区域padding、边框区域border、外边距区域margin。标准盒模型(W3C)和怪异盒模型(IE)标准盒模型的高度只包括content内容区域的高度;IE盒模型的高度包括(content+padding+border)的高度;设置盒模型规则:box-sizing.div{ box-sizing: content-box; //默认,标准盒模型}.div{ box-s原创 2020-12-14 12:20:07 · 69 阅读 · 0 评论 -
CSS选择器及其优先级
选择器的种类基础选择器标签选择器 (tagName)body { width: 100%; background: pink;}类选择器 (.).class { width: 100%; background: pink;}ID选择器 (#)#id { width: 100%; background: pink;}通配选择器 (*)在CSS3中,星号(*)可以和命名空间组合使用:ns| * - 会匹配ns命名空间下的所有元素* | *原创 2020-12-11 19:09:38 · 244 阅读 · 0 评论 -
BFC块级格式化上下文 —— (Block Formatting Context)
BFCBFC: Block Formatting Context (块级格式化上下文)是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。fromatting contextfromatting context包括块格式化上下文 block formatting contexts、内联格式化上下文 inline formatting contexts和灵活格式化上下文 flex formatting contexts。页面上的所有内容都是原创 2020-12-11 16:27:30 · 339 阅读 · 0 评论 -
background简写方式
background有以下属性:css1:background-color:背景色background-image:背景图片background-repeat:背景图片重复规则background-position:背景图片起始位置,默认值0% 0%;可选值:top/center/bottom left/center/right ;只写一个第二个默认center或者:x% y% ;只写一个第二个默认50%或者:xpos yposbackground-attachment:背景图片原创 2020-11-11 17:59:12 · 4676 阅读 · 0 评论