css outline实践研究

【css outline实践研究】的更多相关文章

css outline实践研究

outline具有和border很相似的属性,但多少又有些区别,就是因为这些区别才让它闪闪发光,先目睹一下. <style> div{ width:100px; height:100px; background-color:red; outline:10px solid #ccc; } </style> <div></div> 好像和"border"没啥区别,那么看下面这张图它的宽和高还是100px,并没有增加边框的宽度. 也就是说:o…

css布局实践总结（part2）

一.总结: 在第一篇css布局实践心得总结中总结了通过给元素设置position:absolute的方式让元素处在BFC(块级格式化上下文)的环境中,处在BFC环境中的元素是独立的,它和外面其他元素毫无关系. 今天很兴奋的是实践到了通过将元素设置成inline-block的方式让元素处在BFC的环境中,让其与外面的元素隔绝关系.还是引用这张图.…

CSS3 border-radius 属性和CSS outline 属性

CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设置每个 radii 的四个值.如果省略 bottom-left,则与 top-right 相同.如果省略 bottom-right,则与 top-left 相同.如果省略 top-right,则与 top-left 相同. 语法 border-radius: 1-4 length|% / 1-4 l…

CSS Outline（轮廓）

CSS Outline(轮廓) 一.CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. CSS outline 属性规定元素轮廓的样式.颜色和宽度. 二.所有CSS 轮廓(outline)属性 "CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2). 属性说明值 CSS outline 在一个声明中设置所有的轮廓属性 outline-coloroutline-styleoutline-w…

css盒模型研究

css的盒模型一直是一个重点和难点,最近由后端的学习转到前端,觉得有必要深入研究一下css的盒模型. 1.万物皆盒子我们必须要有一个理念,在html的世界里,万物皆盒子,那就是任何一个html元素都是一个盒模型.比如一个div,一个标题,一个段落.他们本质上都是一个盒模型. 2.盒模型的结构如下所示. 注意它的宽度和高度指的是它元素的宽度和高度.元素到边框之间的区域叫做padding(内边距),边框在往外扩展的区域就叫做外边界.外边界就是整个盒模型能到达的最遥远的地方,也是保证其他的盒子不会…

HTML标签CSS默认值研究

最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现html标签在不同浏览器里面是有默认的css样式的,要去掉默认样式,在样式表里添加 *{margin:0;padding:0;}即可,同时找到一个很有用的文档 <<HTML标签CSS属性默认值汇总>>,这个东西,在你需要还原默认值的时候,比较有用. 如果设置了 *{margin:0;padd…

css:outline

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { width: 500px; height: 30…

CSS命名实践

前面的话每次写HTML结构涉及到CSS命名时,都要挣扎一番.关于CSS命名的规范,市面上有不少,如OOCSS.SMACSS.BEM和MVCSS等.在这里面最火的应该算BEM了.本文将详细介绍CSS命名主流命名 [BEM] 说起CSS命名,当然要提到BEM.BEM的意思就是B模块(block).E元素(element).M修饰符(modifier).模块和子元素之间用两个下划线分隔,子元素和修饰符之间用两个中划线分隔关于子元素E,有两种写法.一种是按照层级嵌套来写,如block-ele1…

405 css样式的研究 list-style-type 属性研究

CSS 列表的样式 list-style-type.list-style-position和list-style-image 属性在CSS中,列表元素是一个块框,列表中的每个表项也是一个块框,只是在表项前面多了一个项目符号.列表的格式化,主要由浏览器完成而不是由设计人员完成设计人员只能通过 list-style属性来定义列表的样式 list-style属性只对 display 属性值为 list-item 的对象有效,对其它类型对象无效.list-style属性的语法格式为: list-s…

知乎网的CSS命名规律研究

笔者是一名Java程序员,前端css和图片本不是我的工作,亦不是我的强项.但很多时候,公司并没有合适的美工,只有自己动手.一般的css技术,倒是没有问题,定位,盒子,浮动,布局等等,都能做.但每每完成,自己审视一遍,总有一种零零散散的感觉,可维护性很差.究其原因,发现更多的是命名的问题.命名随意任性,前期规划不详细,后期改动多,导致class可读性差,重用性更差.就像下面: 压根就看不懂这些元素大概是什么意思.语义性差.这里的hd,bd,别的地方似乎也可以使用. 因此,笔者决心研究一下大网站的做…