- 用像素指定字体大小时,就是在告诉浏览器字母的高度时多少像素。
- 那么,在实际项目中,我该如何指定字体大小呢。使用em或百分比,相对于body字体大小指定其他元素的字体大小。
- 关于字体大小的一些重要问题
- 可以把font-weight的值设在100-900之间的一个数(100的倍数)。但是未得到字体和浏览器的广泛支持。
- rgb是red,green,blue的缩写。
- color属性实际上控制元素的前景色,它会控制文本和边框颜色,不过可以使用border-color指定边框颜色。
- 颜色的十六进制中每一位都相同,这些颜色就是灰色。
- 盒模型
- 什么是盒模型,这就是css看待元素的一种方式。css将每个元素看作一个盒子表示。所有元素都被当作盒子:段落,标题,块引用,列表,列表项等。甚至内联元素如em和链接在css看来也是盒子。
- background-image属性可以设置为一个URL,可以是相对路径,也可以是一个完整的URL。浏览器默认把背景图像放在元素左上角。
- 锯齿边框实现
- id和class不用混用。假设你在与一个团队共同开发一个web项目,某个团队成员看到一个类时,他会认为其他元素可以重用这个类。如果他看到的是一个id,就是知道着对应一个唯一的元素。比如页面上的页眉和页脚,就需要用id。
- 一个庞大的公司网站,公司有很多分部,分部希望以自己的方式对样式有所调整。
样式表的顺序很重要,最下面的样式表最优先。
- 你想针对页面的设备类型来调整页面的样式。可以利用link元素的一个media属性。
- 如果你的css文件相当庞大,建议使用link元素来指定不同的样式表。因为如果把所有规则放在一个文件中,再使用@media规则将它们分开,你的css文件会变得非常庞大。
- 一个块元素的默认宽度是auto,这说明它会延伸占满可用的空间。你没有设置宽度,块元素的宽度就是auto。auto允许内容填满可用的所有空间(包括内边距,边框,外边距)。
- text-align会对块元素中的所有内联内容对齐。这意味着你设置该属性居中,块元素是不起作用的。text-align只能在块元素上设置。
- 子孙选择器,父元素和子元素之间有一个空格。子孙选择器会选择嵌套中所有的元素,而不管嵌套的有多深。
-
表示直接的孩子
-
- line-height设置为1,就表示各个元素行高是自己字体大小的两倍。
- 简写
- span元素建立内联内容的逻辑分组。
- 伪类为什么叫做伪类。因为你可以对伪类指定样式,但是没有人在HTML中真正输入这些伪类。伪类的工作是依赖于浏览器的,这些类真实存在,浏览器会在后台向这些类增加和删除元素。
- 带你彻底懂得层叠样式表。给定一种样式表中的一组样式,浏览器就以层叠方式来确定具体使用哪一种样式。下面会是你了解所有的细节,这是有回报的。等你学完,你就能弄清楚为什么没有像你预期的那样应用某些样式。
- line-heigth/text-align会继承。
- 浏览器在页面上如何摆放元素?知道这个,就能讨论可以采用哪些方法改变页面的布局。
- 流。从文件最上面一直到文件末尾逐个显示,这就是流。==流实际上就是浏览器在页面上摆放HTML元素所用的方法。==浏览器从HTML文件最上面开始,从上到下沿着元素流逐个显示所遇到的各个元素。
- 块元素从上向下流,各元素之间有一个换行。内联元素在水平方向上会相互挨着,总体上从左上方流向右下方。
- 通常并不会设置内联元素的外边距。只有一个例外,这就是图像。对于图像,不仅会设计外边距,还会设置内边距和边框。
- 只要两个垂直外边距碰在一起,就会折叠,即使是一个元素嵌套在另一个元素中也不例外。注意,如果外面的元素有一个边框,那么两个元素的外边距就不会碰到一起,这样就不会折叠。如果把这个边框去掉,就会折叠。
- 流。从文件最上面一直到文件末尾逐个显示,这就是流。==流实际上就是浏览器在页面上摆放HTML元素所用的方法。==浏览器从HTML文件最上面开始,从上到下沿着元素流逐个显示所遇到的各个元素。
- 理解float。通过此处,你对流的了解,一定能超过99%的人。
- 对于浮动元素都有一个要求,它必须有一个宽度。
- 浏览器会从正常流中删除浮动元素。
- 一般是设置小的部分浮动。因为如果设置主内容区为浮动,就必须要为主内容区设置一个宽度。当页面的其余部分随着浏览器宽度大变化而调整大小时,主内容区宽度一直固定,边栏扩展得太宽时,就会喧宾夺主。所以,在大多数设计中,豆希望主内容区扩展,而不是边栏
- 浮动设置向右,它会向右浮动到尽可能远。
通过此文章,自以为是的你一定会重新深刻地系统性认识HTML-2
最新推荐文章于 2024-09-03 15:32:27 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)