【干货】Html与CSS入门学习笔记9-11

2018-06-24 01:42:27来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

九、盒模型 与元素亲密接触

1、盒模型

css将每个元素都看做一个盒子,包括以下属性:

内容区content area:包含内容,内容可以决定大小,也可以自行设定宽度和高度。元素的width属性指定的就是内容区宽度,可以按像素指定也可以按百分比相对于元素所在容器如body div 的大小来指定。

内边距padding:内容区外的透明区域,可以看做元素的一部分,对元素设定背景会延伸到内边距。

边框border:内边距周围的边框。

外边距margin:边框外的透明区域,提供元素与元素之间的间隔,元素背景不会延伸到外边距。元素的(内联,如图像)左右外边距会相加,(块元素)上下外边距会折叠,取最大的,嵌套也是如此。另外,浮动元素的外边距与正常流中的外边距不会折叠。

2、其他

背景图像属性background-image: url(images/background.gif)

背景图像位置background-position:top left 可以按像素、百分数和关键字指定,这个就是左上角的意思

背景图像重复background-repeat:有repeat 在水平和垂直方向重复,默认。no-repeat不重复,只显示一次。repeat-x在水平方向上重复。repeat-y在垂直方向上重复。inherit继承父元素设定。

边框除了border-syle border-width border-color还可以设定圆角,border-radius:15px;或3em;可以用像素也可以用比例(相对元素字体大小)来指定圆角半径大小。也可指定一边圆角,border-top-left-radius:3em;左上圆角。

id属性:在html中加入<p id="footer">  </p>,在css中设定样式,#footer{color:red;}或p#footer{color:red;}(类是用“.”)

多个样式表:加入多个link,最下面的最优先。

样式表针对媒体类型:浏览器会通过媒体类型来确定使用的规则,不匹配的忽略。

在link中增加一个media属性,<link rel="stylesheet" href="loung-mobile.css" media="screen and (max-device-width: 480px)">,针对有屏幕且屏幕宽度不超过480px。

也可以直接在css中单独指定,@media screen and (max-device-width: 480px){       },在这个大括号里放入针对此媒体的规则。

 

十、div与span 高级web建设

div划分逻辑区,将一堆相关的块元素放在一起。

子孙选择器: #elixirs h2会选择嵌套的所有h2,不论是直接子孙还是下级的,不用一层层往下写,会自动选择所有的,不管在多少层。

对属性赋值可以有很多简写:font: normal/1.2em bold san-serif; 其中,字体大小/行间距,其他用空格隔开,顺序无所谓。

span划分逻辑区,将一堆相关的内联内容放在一起。<span class="cd"></span>

1、伪类

伪类是直接在元素后面加“:”,例如a:hover,可直接在css中用而不用在html中像类一样定义,因为是浏览器预先设定好的。

a一般顺序是:a:link{} 未访问状态链接

a:visited{}已访问状态链接

a:hover{}鼠标悬停上时状态

还有其他伪类,如first-child对应第一个子元素,last-child最后一个子元素,nth-child(even/2n)第偶数个子元素,nth-child(odd/2n+1)第奇数个子元素。

 

十一、布局与定位 摆放元素

浏览器从html文件最上面开始,从上到下,从左到右,逐个显示遇到的元素,其中每个块元素有一个换行,这就是流flow。所以,块元素是从上到下,内联元素是从左上到右下。

1、浮动float

为元素设置float属性(首先必须为该元素设定宽度width),浏览器会从流中删除这个元素,其他元素继续按照流摆放,当做没有这个浮动的元素,但是后面的块元素的内联元素会绕着这个浮动元素。

为元素设置clear属性,如clear:right;则该元素右边不允许出现浮动元素,如果有就一直往下移,直到右边没有浮动元素。

2、三种布局

流体布局liquid layout,就是通过流,宽度不固定的设计,这样浏览器调整宽度时,元素会跟着扩展,填满浏览器。

冻结布局frozen layout,为整个内容区大div设置宽度,浏览器调整宽度时,内容区不会变,但右边留白会越来越大。

凝胶布局jello layout,为整个内容区大div设置宽度,同时设定margin-left, margin-right: auto;这样浏览器扩展时,内容区会保持大小不变,但始终居中。

3、四种定位position

属性position: static; 静态定位,是默认方式(不设置时),就是将元素放入正常的流中布置。

position: absolute;绝对定位,相对于页面或最近的父元素固定,根据其他left top(可以用像素也可以用百分数)属性确定位置。从流中删除,块元素和内联元素都不知道该元素的存在,内联元素也不会绕着它摆放。

position:relative;相对定位,放入流中,是相对于该元素在流中本来的位置进行的偏移,left top 这些。

position:fixed;固定定位,相对于浏览器窗口固定,不在流中,对块元素和内联元素都没有任何影响。

可以为绝对定位、相对定位和固定定位元素设置z-index属性,值越大,越靠近你,越往上层。

4、利用表格布局

表格单元格内放置的都是块元素。

外框div属性设置为display: table;

行div属性设置为display:table-row;

行内单元格div设置为display:table-cell;

可以在外框div属性设置border-spacing:10px;为每个单元格统一增加10像素的边框间距,则单元格div不用设置margin外边距。另外边框间距会与表格外块元素的外边距相加,不会折叠。

还要在单元格div设置属性vertical-align:top;确保单元格内容相对于上边对齐。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果

下一篇:bootstrap导航栏的辛酸史