盒子模型——页面布局的常用属性

最新推荐文章于 2023-04-24 13:06:16 发布

Yue-Baekhyun

最新推荐文章于 2023-04-24 13:06:16 发布

阅读量747

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_61561066/article/details/124470048

版权

一、HTML中元素类型的转换

1、标签的等级

(1)行内标签：可以和其他的标签(元素)在行内并排；不能设置宽和高；默认的宽度就是文字的宽度。eg： span、input、label
(2)块级标签：每个标签独占一行，不能和其他任何标签并列(同一行显示)；可以设置宽高，若不设宽度则它的宽度默认为父级标签的100%
常见的块级标签：标题标签：h1~h6 、段落标签：p 、列表标签：ul、ol、li 、div

2、元素类型的转换

通过CSS的display属性实现块级元素和行内元素的相互转换。

display属性的取值：
inline：将元素转换为行内元素。若元素是行内元素,则该元素的display属性的默认为inline
block：将行内元素转换为块级元素。块级元素display属性的默认值
inline-block：与inline的区别是允许元素设置宽高、对齐方式、间距等属性

二、页面布局

1、页面布局的过程

第一步：确定版心。是页面的主要内容，通常在页面中水平居中显示
第二步：分析页面中的模块(header、nav、banner、content、footer)
第三步：控制页面的各个模块(页面布局设计)

2、页面布局的常用属性

A、浮动属性 float

可以让标签在页面中浮动起来，打破传统的流式布局，使页面内容更丰富
float属性的取值：left、right、none(默认值)

（1）浮动属性的副作用

a、父级容器的背景无法显示
b、父级容器的边框不能被撑开
c、会导致margin、padding属性失效

（2）清除浮动影响（副作用）的方法

a、对父级元素设置合适的CSS高度
           b、使用clear:both清除浮动
           c、为父级元素设置overflow:hidden

<style>
.parent{
        width: 500px;
        background-color: yellow;
        height: 150px;/*用第一种方法消除副作用*/
    }
.clear-div{
       clear: both;
   }/*用第二种方法清除副作用*/
</style>
<body>
    <div class="parent">
        <div class="left-son">box-left</div>
        <div class="right-son">box-right</div>
        <div class="clear-div"></div><!--用第二种方法清除副作用-->
    </div>
</body>

B、定位属性 position

（1）定位模式

a、static：自动定位(默认)
b、 relative：相对定位，相对于其原文档流的位置进行定位
c、 absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
d、fixed：固定定位，相对于浏览器窗口进行定位

eg：

<style>
    .d1{
        width: 200px;
        height: 150px;
        background-color: red;
    }
    .d2{
        width: 260px;
        height: 160px;
        position: relative; /*相对定位，相对于红色div下边框有50px距离，他的前面没有文本，
        所以相对网页边框右移160px*/
        position: absolute;/* 绝对定位，遇上一个已定位的元素之间的距离，因为d1没有被定位，
        所以d2绝对定位参考body*/
    }
</style>

（2）偏移量

a、top：距离顶部的偏移量
           b、 left：距离左侧的偏移量
           c、right：距离右侧的偏移量
           d、bottom：距离底部的偏移量

C、溢出属性 over-flow

a、visible：默认值,内容不会被修剪,多余的内容会呈现在元素框之外

b、hidden：溢出内容会被修剪，并且被修剪的内容是不可见的

c、auto：在需要时产生滚动条，即自适应所要显示的内容

d、scroll：溢出内容会被修剪，且浏览器会始终显示滚动

D、层叠属性 z-index

在多元素定位时，会出现位置的重叠。
取值可以是正整数、0、负整数,默认值为0

Yue-Baekhyun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型——页面布局的常用属性

目录一、HTML中元素类型的转换1、标签的等级2、元素类型的转换二、页面布局1、页面布局的过程2、页面布局的常用属性A、浮动属性 float（1）浮动属性的副作用（2）清除浮动影响（副作用）的方法B、定位属性 position （1）定位模式（2）偏移量C、溢出属性 over-flowD、层叠属性 z-index一、HTML中元素类型的转换1、标签的等级 (1)行内标签：可以和其他的标签(元素)在行内并排；不能设...
复制链接

扫一扫