CSS
文章平均质量分 74
yanner_
这个作者很懒,什么都没留下…
展开
-
学习CSS注意点
1.当同一个HTML元素被不只一个样式定义时,那么使用样式的层叠次序为:(次序由低到高) - 浏览器缺省设置 - 外部样式表 - 内部样式表(位于标签内部) - 内联样式(在HTML元素内部)2.用多重声明时,尽可能在每个申明后加上封号,可在你增减声明时减少出错可能性,最好每行定义一个声明,增强可读性。3.id选择器:id属性只能在每个HTML中出现一次。原因参阅:XHTML网站重原创 2017-09-24 22:44:46 · 287 阅读 · 0 评论 -
sass用法总结
你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。很自然地,有人就开始为CSS加入编程元素,这被叫做”CSS预处理器”(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。...原创 2018-08-27 21:32:32 · 228 阅读 · 0 评论 -
css选择器优先级及权重计算
一、优先级分类 通常可以将css的优先级由高到低分为6组:第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。 第二优先级:在html中给元素标签加style,即内联样式。该方法会造成css难以管理,所以不推荐使用。 第三优先级:由一个或多个id选择器来定义。例如,#id{margin:0;}会覆盖.classn...原创 2018-08-06 21:36:55 · 204 阅读 · 0 评论 -
水平垂直居中
一、元素水平居中 1.margin: 0 auto;<div class="box"> <div class="content"> 哇!居中了 </div></div><style type="text/css">.box { background-co原创 2018-08-06 21:06:52 · 145 阅读 · 0 评论 -
三栏布局
第1种:绝对定位 左侧栏和右侧栏分别用绝对定位固定在左侧和右侧,中间栏则利用margin-left和margin-right空出左右栏位置来。<div id = "left"></div><div id = "main"></div><div id = "right"></d原创 2018-08-06 20:45:12 · 121 阅读 · 0 评论 -
两栏布局
第1种:浮动 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。<style> div { height: 200px; } .left { float: right; width: 200px; background-co...原创 2018-08-06 20:19:03 · 148 阅读 · 0 评论 -
css清除浮动方法
浮动:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷) 知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了,这时候我们就需要用到清除浮动的属性clear, clear:left | right | both | none | inherit:元素的某个方...原创 2018-07-22 22:36:23 · 144 阅读 · 0 评论 -
position属性及z-index属性
position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute、sticky。 (1)position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响。 (2)fixed定位 fixed定位是指元素的位置相对于浏览器窗口是固定位...原创 2018-07-22 21:56:46 · 362 阅读 · 0 评论 -
理解BFC
BFC (Block formatting context) “块级格式化上下文”,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以及其他的FC。 它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。1.触发BFC的条件 (1)根元素,即HT...原创 2018-07-21 21:22:05 · 146 阅读 · 0 评论 -
盒子模型
盒子模型的理解 盒子模型有两种:W3C和IE盒子模型 盒子模型包括margin、border、padding、contentW3C的元素宽度=content的宽度 IE的元素宽度=content+padding+border我个人认为W3C定义盒子模型与IE定义的盒子模型,IE定义的比较合理, 元素的宽度应该包含border(边框)和padding(填充),这个和我们现实生活的盒子...原创 2018-07-21 17:11:22 · 135 阅读 · 0 评论 -
flex弹性布局
使用弹性布局可以有效的分配一个容器的空间 ,即使我们的容器元素尺寸改变 ,它内部的元素也可以调整它的尺寸来适应空间 。 若想让一个元素变成弹性盒: .demo { /*块级元素*/ display: flex;}.demo { /*行级元素*/ display: inline-flex;}设置了flex布局后,子元素的float、clear和vertical-...原创 2018-07-25 20:53:14 · 199 阅读 · 0 评论 -
CSS定位
css-定位css的定位有以下几种:1.static定位 这个是默认的方式。 特别说明:对static而言,left和top是没有用的。2.relative定位(相对定位) 元素框偏移某个距离(left和top)。元素本身形状不变化,它原本所占的空间仍保留,从这一角度看,好像该元素仍然在文档流/标准流中一样。 特别说明:1.relative的参照点是它原来的位置进行移动。案例: 改原创 2017-09-30 20:39:44 · 218 阅读 · 0 评论 -
css盒子模型
CSS盒子模型盒子模型的原理图: 细节说明: 1.html元素都可以看成一个盒子。 2.盒子模型的参照物不一样,则使用的css属性不一样,比如从div的角度看,是margin-right,从div2看,则是margin-left。 3.如果你不希望破坏外观,则尽量使用margin布局,因为padding可能会改变盒子的大小(相当于这个盒子有弹性),margin如果过大,盒子内容被挤到盒子外边原创 2017-09-28 14:43:40 · 316 阅读 · 0 评论 -
css细节整理
1.XHTML与HTML的有何异同? HTML 和 XHTML 的区别简单来说,XHTML 可以认为是 XML 版本的 HTML,为符合 XML 要求,XHTML 语法上要求更严谨些。 功能上的差别:主要是XHTML可兼容各大浏览器、手机以及PDA,并且浏览器也能快速正确地编译网页。 书写习惯的差别:XHTML要求比较严谨,所以书写应用要求细心与细致,XHTML要求正确嵌套,XHTML所有元...原创 2018-08-24 14:46:18 · 328 阅读 · 0 评论