为了账号安全,请及时绑定邮箱和手机立即绑定

HTML-页面布局

标签:
Html/CSS

一、盒子模型:


整体的宽=margin-left(right)+padding-left(right)+border+content

整体的高=margin-top(bottom)+padding-top(bottom)+border+content

二、页面布局:

(1)标准流:按照原先格式排版块儿元素等一些格式,所有块儿都是按照竖排排列,自占一排。

(2)浮动流:给div标签加上float属性,是指按照属性来排列。若想让所给的块儿元素按照横行排列,需要给每个div元素均添加float:left(right)属性。

(3)每个对象都可以调用多种样式,样式之间用空格键来进行分开即可。

(4)要是块级元素居中,使用margin:0 auto;

       要是行内元素居中,给父元素使用text-align:center;

(5)建立页面前可以建立一个通用页面,清除margin,padding等值。其中list-style:none;属性可以使列表中的圆圈,方块儿等标志去掉。clear:both可以清除浮动属性。当行高等于页面块状元素的高时,其中的内容垂直居中。使用display:inline-block(block)属性可以让行内元素和块元素进行转换。ctrl+shift+/=注释(其中的内容并不在页面中显示),在html中:<!--  -->代表注释,在css中:/* */代表注释。border-radius属性可以设置圆角效果。cursor:pointed可以在鼠标停留时由箭头变成手状。input-outline:none可以使所有由input定义的框框除去除在选中时的蓝色边框。

(6)页面中的定位:position属性,relative(相对定位:不加限定的时候以该标签原先所在的位置为参考)/absolute(绝对定位:以父元素位置为参考)/fixed(固定定位:定在页面中的位置保持不动)。

如果想要进行移动,要给父元素定义position:relative;(此时不用定义top等值)

position与top,bottom,left,right在一起使用

若定位与浮动在一起使用时,浮动效果消失。

(7)">"连接的元素代表父子关系,只适用于两代,而使用空格的则代表该元素下所有相同的标签。

(8)在下拉表单中,要想让鼠标停留时再出现其中的内容时,需要在其中添加display:none(系统默认隐藏,不占用结构,等于此代码被注释)而使用display:block可以使内容显示出来。

(9)hover属性可以使用在很多标签上,用于定义鼠标停留时的样式。

(10)

显示属性
  display:
   属性值:none:隐藏
     block:块级显示
     inline:行级显示
   
   <form action="">
    name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>
    <br>
    pass:<input id="pass" type="password" />
    <br>
    <input id="btn" type="button" value="button" />
   </form>
   <style type="text/css">
    span{color:red;display: none}
   </style>
   <script type="text/javascript">
    document.getElementById("btn").onclick = function(){
     document.getElementById("span").style.display = "inline";
    };
   </script>
 (11)

浮动属性
  float:
属性值:left  right
clear:清除浮动 left right both
缺点: (1)影响相邻元素不能正常显示。(2)影响父元素不能正常显示。

 

 

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消