【干货】Html与CSS入门学习笔记9-11
九、盒模型 与元素亲密接触
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;确保单元格内容相对于上边对齐。
【干货】Html与CSS入门学习笔记9-11的更多相关文章
- 【干货】Html与CSS入门学习笔记1-3
从23号开始用了4天时间看完了<Head First Html与CSS>这本书,本书讲解方式深入浅出,便于理解,结合习题,便于记忆,是一本不错的入门书.下面是本书的学习笔记: 一.认识HT ...
- 【干货】Html与CSS入门学习笔记4-8
四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...
- 【干货】Html与CSS入门学习笔记12-14【完】
十二.HTML5标记 现代HTML html5新增的元素:header nav footer aside section article time 这些新增元素使页面结构更清晰,取代<div i ...
- HTML&CSS基础学习笔记1.11—导航栏
上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...
- stylus入门学习笔记
title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...
- Sass简单、快速上手_Sass快速入门学习笔记总结
Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记(三)
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
随机推荐
- 查看ip常见命令...
1.获取ip Unix用户可以在命令提示符中输入ifconfig来获取. 使用Windows的用户,请尝试使用 ipconfig 命令.
- luogu2253 好一个一中腰鼓!
先说一个小trick,一开始我们把他赋值成是红.白相间的,查询就查询的是全红或全白即可. 然后就可以做啦 题解里面好像都是线段树 暴力的题解好像都被del了 貌似暴力交上去也过不了了 然后我想说 分块 ...
- luogu1556 幸福的路
注意到\(n\le10\),所以枚举经过的拐弯牛的所有排列. 注意到STL是一个好东西,所以我这里偷懒直接使用了next_permutation 枚举所有n的排列,对于每一个排列也就是经过拐弯牛的顺序 ...
- react 什么是虚拟DOM?深入了解虚拟DOM
底层的理论基础 一. 原始生成步骤 1.state 数据 2.jsx 模版 3.数据 + 模板 结合,生成真实的DOM,来显示 4.state 发生改变了 5.数据 + 模板 结合,生成真实的DOM, ...
- pytorch tensor与numpy转换
从官网拷贝过来的,就是做个学习记录.版本 0.4 tensor to numpy a = torch.ones(5) print(a) 输出 tensor([1., 1., 1., 1., 1.]) ...
- [Groovy]转:Groovy 通过 isCase 方法进行分类
闭包实现了 isCase 方法,这样闭包可以在 grep 和 sw itch 中作为分类器使用,在这种情况下,各自的参数传递给闭包,然后调用闭包进行计算得到一个 Boo lean 值(参考 6.1 节 ...
- spring boot app
一个demo 可以参考一下 AppConfig @Configuration @ComponentScan(basePackages = { "org.whm.test" }) ...
- day18 约束 异常
1. 类的约束 方案一:抛出异常,子类必须重写父类方法,否则会报错 class Base: def login(self): #强制xxx做XXX事 raise NotImplementedError ...
- tomcat启动非常慢
解决: 有两种解决办法: 1)在Tomcat环境中解决 可以通过配置JRE使用非阻塞的Entropy Source. 在catalina.sh中加入这么一行: JAVA_OPTS="-Dja ...
- SpringBoot2.0.3整合Quartz2.3.0实现定时任务
转载:https://www.cnblogs.com/ealenxie/p/9134602.html 关于别人写的quartz学习的地址:https://blog.csdn.net/lkl_csdn/ ...