(十二)学习CSS之box-sizing 属性】的更多相关文章

参考:http://www.w3school.com.cn/cssref/pr_box-sizing.asp CSS3 box-sizing 属性 定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box".这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中. 语法 box-sizing: content-box|border-box|in…
参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"."run-in"."table"."table-caption"."table-cell".&qu…
在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X:link X:visited X:hover X:active 伪类 a:link { color: red; }a:visted { color: purple; } 伪类选择器,visted已被访问过的样式,hover鼠标经过的样式,link未被访问的样式.三种伪类选择器常用于链接,但不是说只适用于链接…
基础选择器一.标签选择器(元素选择器)标签选择器是指用HTML标签名称作为选择器,按标签名称分类语法:标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;} 二.类选择器1.类选择器使用"."(英文)+类名进行选择 三.css命名规范1.长名称或词组可以使用中横线来为选择器命名2.不建议使用“_”下划线来命名Css选择器3.不要用纯数字或中文命名 命名规范是我们通俗约定.见名知意 四.多类名选择器语法:class="类名1 类名2" 五.id选择器1.id…
五.什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样, 每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧. 但是在网页上局部使用层布局还是有其方便之处的.下面我们来学习一下html中的层布局. 如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作. CSS定义了一组定位(positioning)属性来支持层布局模型. 层模型有三种形式: 1.绝对定位…
一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板. 如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float…
参考:http://www.w3school.com.cn/tiy/t.asp?f=csse_zindex cursor 属性规定要显示的光标的类型(形状). <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:auto"> Auto</span><br /> <span style="cursor:cros…
<!doctype html> <html> <head> <meta charset="utf-8"> <title>网业设计软件列表</title> <link rel="stylesheet" type="text/css" href="../css/style04.css"> <style> a{padding-right:…
一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置display:box; 1.box-flex:number; 1)占父级元素宽度的number份 2)若子元素设置固定宽度,则该子元素应用固定宽度,其他未设置固定宽度的字元素将余下的父级宽度(父级-已设置固定宽度的子代元素的总宽度按 number占份数 3)若子元素有margin值,则按余下(父级宽度-子代…
样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head></head>标签内.个人感觉多用于较多或通用的一类标签,用来减少工作量 <style type="text/css"> {} </style> 分为三种: 标签选择器 <style type="text/css">…