网页布局基础

WalkerXu 发布于2019-04-23 13:22 / 1417人阅读

摘要：左右撑满整个容器，为自己清除浮动创建条件。练习题已知一个设置了绝对定位的元素，位于其父元素中，元素为静态元素，则元素将以为基准进行偏移。答案是因为为静态位置，所以要以根元素为基准进行偏移，也就是元素静态定位是，是元素的默认定位属性。

1、盒子模型的第一层到第五层： border、padding+content、background-image、background-color、margin

2、清除浮动。对受到浮动影响的标签作以下操作：
     1、clear: both;
     2、clear: right; clear: left;
     3、设置宽度width: 100%(或者固定宽度)+overflow: hidden;

3、两种清除浮动方法的使用场景： 1、当子元素设置了浮动，父元素没有设置浮动而导致的父元素高度不能自动扩展，缩成一条线，子元素从父元素中溢出时，适合使用同时设置width:100%（或固定宽度值）+overflow:hidden的方式来清除浮动；此法可同时去除紧邻的块级受到的浮动影响，而不需要再对受到浮动影响的紧邻块级元素设置去除浮动。 2、如果是紧邻的块级元素受到浮动影响,对该受到影响的块级设置clear:both或者clear:left,clear:right更为合适。 注意：width设置为100%就是继承父容器的宽度。左右撑满整个容器，为自己清除浮动创建条件。再加溢出隐藏，就可以把包裹浮动的部分去除。

4、绝对定位特点：

建立了以包含块位基准的定位
完全脱离标准文档流
随即拥有偏移属性跟z-index属性

未设置偏移量时：(left、top)
无论是否存在已经定位的祖先元素，都保持在元素初始位置脱离标准文档流
设置偏移量时：偏移参照的基准：
无已定位的祖先元素：以为偏移参照基准；
有已定位的祖先元素：以距其最近的已定位的祖先元素为偏移参照基准。

注意：当一个元素设置了绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。

练习题：已知一个设置了绝对定位的元素b，位于其父元素a中，a元素为静态元素，则b元素将以(html)为基准进行偏移。答案是因为a为静态位置，所以要以根元素为基准进行偏移，也就是html元素（静态定位是position:static，是元素的默认定位属性。只有设置了absolute或relative或fixed才算已定位的父级元素。

5、隐藏按钮文字的小技巧： text-indent: -999px; overflow: hidden; 先使用text-indent:-999px;语句把被设置元素“挤出去”了，然后设置溢出的元素都隐藏起来，也就是被挤出去的元素隐藏起来。

6、媒体查询：可被用于css中的@media和@import规则上，也可被用在HTML和XML中。 1）@media screen and (width: 800px){...} 2）@import url(example.css) screen and (width: 800px); 3）0

混合云 idc机房托管布局网页网页布局设计 div网页布局 java布局网页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1789.html

2019年前端学习路线

摘要：也就是我们常见的浏览器以及内置浏览器，比如微信打开的大型移动端网页。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是语法。学习路线放一下给大家。前端开发学习不是单一的，内容比较多，同样应用的场景也非常多。近两年来，前端开发工程师越来越火了，2019年已经到来了，很多准备入行前端开发工程师的小伙伴们，不知道准备得怎么样了呢？有的朋友在想方设法的学习，争取在年后...

cfanr 2019-08-30 15:55 评论0 收藏0
2019年前端学习路线

摘要：也就是我们常见的浏览器以及内置浏览器，比如微信打开的大型移动端网页。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是语法。学习路线放一下给大家。前端开发学习不是单一的，内容比较多，同样应用的场景也非常多。近两年来，前端开发工程师越来越火了，2019年已经到来了，很多准备入行前端开发工程师的小伙伴们，不知道准备得怎么样了呢？有的朋友在想方设法的学习，争取在年后...

Miracle_lihb 2019-08-23 15:14 评论0 收藏0
2019年前端学习路线

摘要：也就是我们常见的浏览器以及内置浏览器，比如微信打开的大型移动端网页。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是语法。学习路线放一下给大家。前端开发学习不是单一的，内容比较多，同样应用的场景也非常多。近两年来，前端开发工程师越来越火了，2019年已经到来了，很多准备入行前端开发工程师的小伙伴们，不知道准备得怎么样了呢？有的朋友在想方设法的学习，争取在年后...

zhoutk 2019-08-02 14:15 评论0 收藏0
2019年前端学习路线

摘要：也就是我们常见的浏览器以及内置浏览器，比如微信打开的大型移动端网页。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是语法。学习路线放一下给大家。前端开发学习不是单一的，内容比较多，同样应用的场景也非常多。近两年来，前端开发工程师越来越火了，2019年已经到来了，很多准备入行前端开发工程师的小伙伴们，不知道准备得怎么样了呢？有的朋友在想方设法的学习，争取在年后...

Muninn 2019-08-05 18:09 评论0 收藏0
网页布局基础-imooc

摘要：第章自动居中一列布局相关知识点讲解标准文档流块级及行级元素等标准标准，由万维网联盟制定的一系列标准，包括结构化标准和表现标准语言行为标准语言和倡导结构样式行为分离。中的定位机制种的定位机制标准文档流浮动绝对定位。第1章课程简介 1-1 课程简介网页布局：网页制作的基础流式布局浮动布局绝对定位布局与三种布局相关的知识点：标准文档流，盒子模型，float属性，position...

Lucky_Boy 2019-08-30 12:46 评论0 收藏0
[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0