网页布局基础

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属性
  1. 未设置偏移量时:(left、top)
         无论是否存在已经定位的祖先元素,都保持在元素初始位置 脱离标准文档流
  2. 设置偏移量时:偏移参照的基准:
         无已定位的祖先元素:以<html>为偏移参照基准;
         有已定位的祖先元素:以距其最近的已定位的祖先元素为偏移参照基准。
    注意:当一个元素设置了绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。

 
练习题:已知一个设置了绝对定位的元素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)<link media="screen and (width: 800px)" rel="stylesheet" href="example.css"/>0

 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hcc01j&title=网页布局基础

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql与串口通信_虚拟机串口与主机串口通信·小程序(下)

上次说到的&#xff0c;不能做到实时通信。那么开两个进程就可以了&#xff0c;一个用来监听是否有消息传来&#xff0c;一个用来等待用户输入。那么&#xff0c;先来复习一下进程的相关概念。进程结构linux中进程包含PCB(进程控制块)、程序以及程序所操纵的数据结构集&#xf…

浅谈我所见的CSS命名风格

在两年工作中&#xff0c;总结一下我所见的css命名风格。 1.单一class命名 .header {width: 500px; } .item {text-indent: 20%; } 优点&#xff1a;简单&#xff0c;渲染效率高。 缺点&#xff1a;零散&#xff0c;没有模块化。 2. 后代选择器class命名 .header .item a {font…

Java规范请求中的数字

你们都了解Java社区流程 &#xff08;JCP&#xff09;&#xff0c;不是吗&#xff1f; JCP是为Java技术开发标准技术规范的机制。 任何人都可以注册该站点并参与对Java规范请求&#xff08;JSR&#xff09;的审查和提供反馈&#xff0c;并且任何人都可以注册成为JCP成员&#x…

ORACLE MOS 翻译

http://blog.csdn.net/msdnchina/article/details/53174196转载于:https://www.cnblogs.com/zengkefu/p/6665950.html

自从我这样撸代码以后,公司网页的浏览量提高了107%!

欢迎大家前往腾讯云 社区&#xff0c;获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队发表于云 社区专栏 作者&#xff1a;yangchunwen HTTP协议是前端性能乃至安全中一个非常重要的话题&#xff0c;最近在看《web性能权威指南(High Performance Browser Networking)》&a…

python数列分段_按范围分段的Python数组

首先&#xff0c;定义你的“极”数第二&#xff0c;根据这些“极”数生成间隔第三&#xff0c;定义尽可能多的列表。在然后&#xff0c;对于每个间隔&#xff0c;扫描列表并在相关列表中添加属于该间隔的项代码&#xff1a;source [1, 4, 7, 9, 2, 10, 5, 8]poles (0,3,6,25)…

51nod 1278 相离的圆

基准时间限制&#xff1a;1 秒 空间限制&#xff1a;131072 KB 分值: 10 难度&#xff1a;2级算法题 平面上有N个圆&#xff0c;他们的圆心都在X轴上&#xff0c;给出所有圆的圆心和半径&#xff0c;求有多少对圆是相离的。例如&#xff1a;4个圆分别位于1, 2, 3, 4的位置&…

让我们将包变成模块系统!

使用构建系统将许多项目分为模块/子项目&#xff08; Maven &#xff0c; Gradle &#xff0c; SBT …&#xff09;&#xff1b; 编写模块化代码通常是一件好事。 将代码分为构建模块主要用于&#xff1a; 隔离代码部分&#xff08;减少耦合&#xff09; api / impl拆分 仅将…

R语言日期的表示和运算(详细总结)

1、取出当前日期 Sys.Date() [1] "2014-10-29" date() #注意&#xff1a;这种方法返回的是字符串类型 [1] "Wed Oct 29 20:36:07 2014" 2、在R中日期实际是double类型&#xff0c;是从1970年1月1日以来的天数 typeof(Sys.Date()) [1] "double" …

html高度塌陷问题解决

高度塌陷的问题&#xff1a; 当开启元素的BFC以后&#xff0c;元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠 开启BFC的元素不会被浮动元素所覆盖 开启BFC的元素可以包含浮动的子元素 如何开启元素的BFC 设置元素浮动 设置元素绝对定位 …

java空格键_Java KeyPressed-如果其他键也太旧,则无法检测是否按下了空格键

如标题所示&#xff0c;在我的Java游戏中&#xff0c;无法检测是否同时按下空格键和其他键。例如&#xff0c;空格键是射击键&#xff0c;而箭头键则使玩家移动。如果我按下向上箭头键&#xff0c;向左箭头键和空格键&#xff0c;那么它应该向左上方发射子弹。但是&#xff0c;…

How to fix the bug “Expected required, optional, or repeated.”?

参考&#xff1a;https://github.com/tensorflow/models/issues/1834 You need to download protoc version 3.3 (already compiled). Used protoc inside bin directory to run this command like this:tensorflow$ mkdir protoc_3.3tensorflow$ cd protoc_3.3tensorflow/prot…

立面设计模式–设计观点

在上一篇文章中&#xff0c;我们描述了适配器设计模式 。 在今天的文章中&#xff0c;我们将展示另一种类似的“四结构帮派”模式 。 顾名思义&#xff0c;结构模式用于从许多不同的对象形成更大的对象结构。 外观模式就是这样一种模式&#xff0c;它为系统内的一组接口提供了简…

Java第三次作业 1502 马 帅

《Java技术》第三次作业 &#xff08;一&#xff09;学习总结 1.书中对面向对象封装性的定义为&#xff1a;指把对象的属性和行为看成一个密不可分的整体&#xff0c;把不需要让外界知道的信息隐蔽起来。简单来说&#xff0c;就是定义的一些对象&#xff0c;只有在本类中才可以…

sass运算

sass具有运算的特性&#xff0c;可以对数值型的Value(如&#xff1a;数字、颜色、变量等)进行加减乘除四则运算。 请注意运算符前后请留一个空格&#xff0c;不然会出错。 scss.style css.style 本文转载于:猿2048https://www.mk2048.com/blog/blog.php?idiij12j&titles…

163 coremail_Icoremail企业邮箱

高速稳定iCoremail企业邮箱于国内外多个网络运营商的主干网数据中心放置邮件服务器&#xff0c;同时采用我司自主研发的Coremail电子邮件系统&#xff0c;从多方面保障了用户的流畅体验。安全可靠iCoremail企业邮箱使用欧洲最大的反病毒安全提供商的Sophos反病毒系列产品&#…

jquery-基础事件[下]

<script>$(function () {mouseover mouseout mouseenter mouseleave的区别$(div).mouseover(function () {$(this).css(background, red);}).mouseout(function () {$(this).css(background, green);});$(div).mouseenter(function () {$(this).css(background, red);}).…

JavaOne 2012:NetBeans.Next –未来路线图

我从Continental Ballroom 4和一个NetBeans主题&#xff08; 项目Easel &#xff09;到Continental Ballroom 5&#xff0c;走了必要的几个步骤&#xff0c;以查看另一个面向NetBeans的演示文稿&#xff1a;“ NetBeans.Next –未来路线图”。 Ashwin Rao发起了“羽毛之鸟”&am…

LeetCode day30

LeetCode day30 害&#xff0c;昨天和今天在搞数据结构的报告&#xff0c;后面应该也会把哈夫曼的大作业写上来。 今天认识认识贪心算法。(&#xff61;&#xff65;∀&#xff65;)&#xff89; 2697. 字典序最小回文串 给你一个由 小写英文字母 组成的字符串 s &#xff0c;…

html注册表

这是第一次使用html写一个简单的注册表&#xff08;有不对的地方希望大家可以帮我指出来谢谢?&#xff09; <!DOCTYPE html><html><head> <title>木木音乐网第一次注册表</title></head><body><h2>使用手机号码注册</…