Div+CSS布局相关属性（2）

╰半夏微凉° 2022-06-16 02:20 195阅读 0赞

# Div+CSS布局相关属性    #

## 1.div和span ##

div和span在整个HTML标记中没有任何意义，他们存在就是为了应该CSS样式

div和span区别就是在于，span是内联元素，div是块级元素

例子:

<div>
        div和span在整个HTML标记中没有任何意义，他们存在就是为了应该CSS样式
        div和span区别就是在于，span是内联元素，div是块级元素
    </div>
    <span>div和span在整个HTML标记中没有任何意义，他们存在就是为了应该CSS样式
    div和span区别就是在于，span是内联元素，div是块级元素</span>
    </body>

div{
        background-color: chartreuse;
    }
    span {
        background-color: red;
    }

![Center][]

## 2.盒模型 ##

margin：盒子外边距

padding：盒子内边距

border：盒子边框宽度

width：盒子宽度

height：盒子高度

![Center 1][]

## 3.布局相关的属性 ##

### 3.1 position定位方式 ###

relative：相对定位

1.使用相对定位的盒子，会相对于它原本的位置，通过偏移制定的距离，到达新的位置。

2.使用相对定位的盒子仍在标准流中，它对父兄盒子没有任何影响。

absolute：根据父元素进行定位

1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

2.绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

注意：

![Center 2][]

fixed：根据浏览器窗口进行定位

static:没有定位

inherit：继承定位

### 3.2定位 ###

只有定义了相对属性，position：relative或者position：absolute，才可以定位以下属性

与页面定点的距离：

left：10px

right：10px

top：10px

bottom：10px

### 3.3 z-index层覆盖先后顺序（优先级） ###

z-index：0  默认

z-index：x       x 数值比0大则覆盖在上面

### 3.4display显示属性 ###

none：不显示，隐藏

block：块状显示，在元素后面换行，显示下一个块元素

inline：内联显示，多个块可以显示在一行内

注意：可以把div块元素通过display显示属性转换为内联元素span， display：inline

可以把span内联元素通过display显示属性转换为块元素div， display：block

### 3.5 float浮动属性 ###

left：左浮动

right：右浮动

### 3.6 clear清除属性 ###

clear：both

### 3.7overflow溢出属性    ###

hidden:隐藏超出层大小的内容

scroll：无论内容是否超出层大小都添加滚动条

auto：超出时自动添加滚动条

## 4.兼容性问题 ##

![Center 3][]

![Center 4][]

## 5.DIV+CSS页面布局实战 ##

超链接去除下划线： a  \{  text-decoration：none；\}

列表去除样式： li \{   list-style：none；\}

列表左排列  ： li \{ float : left ;\}

(用小条截图重复成背景色)加背景色:background: url(" ../image/   hover.jpg") repeat-x;

快捷键：div.logo+Tab键  即为 <div class="logo">

h1>a>img+Tab键   即为 <h1><a href="   "><img src="  " alt="  "/></h1>

[Center]: /images/20220616/9ff272cdf676407495a8d3aefc41a3f9.png
[Center 1]: /images/20220616/e5fe118c378442eab33600e4211f12b4.png
[Center 2]: /images/20220616/472c9fd9838349b484470d915ab3091b.png
[Center 3]: /images/20220616/1678732db952473eb34977c422256c84.png
[Center 4]: /images/20220616/35ca5022500c4a6e9511c0074578d68b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 flex布局相关

定义在容器上的属性: justify-content属性定义了项目在主轴上的对齐方式。 * flex-start（默认值）：左对齐 * flex-end...

向右看齐/ 2024年04月18日 21:30/ 0 赞/ 76 阅读

相关 DIVCSS使用要点是什么

css 兼容要点：doctYPe 影响 css 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, ie 不行 FF

爱被打了一巴掌/ 2024年04月03日 09:31/ 0 赞/ 129 阅读

相关关于divcss的使用详细介绍

第一步：先建立index.html和css.css两个文件。放在同一目录里 \[建议编辑工具用dreamweaver以后简称dw\] 第二步：在index.ht

红太狼/ 2024年04月03日 09:30/ 0 赞/ 136 阅读

相关 DIVCSS技术如何入门

css是cascading style sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助css的强大功能，网页

我会带着你远行/ 2024年04月03日 09:30/ 0 赞/ 120 阅读

相关 CSS属性相关

宽和高 width属性可以为元素设置宽度。 height属性可以为元素设置高度。块级标签才能设置宽度，内联标签的宽度由内容来决定。字体属性

谁践踏了优雅/ 2023年08月17日 17:18/ 0 赞/ 73 阅读

相关弹性布局（Flex 布局）属性图解

1、主轴和交叉轴 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

小咪咪/ 2022年12月27日 02:22/ 0 赞/ 239 阅读

相关 android布局属性

android:layout\_alignParentRight="true" 使当前控件的右端和父控件的右端对齐。这里属性值只能为true或false，默认false。

刺骨的言语ヽ痛彻心扉/ 2022年08月11日 00:57/ 0 赞/ 250 阅读

相关 RelativeLayout布局属性

子类控件在RelativeLayout中常用的属性：子类空间相对父类容器的位置： android:layout\_alignParentLeft="true"——子类

清疚/ 2022年07月24日 06:28/ 0 赞/ 255 阅读

相关 Div+CSS布局相关属性（2）

Div+CSS布局相关属性 1.div和span div和span在整个HTML标记中没有任何意义，他们存在就是为了应该CSS样式 div和span区别就是

╰半夏微凉°/ 2022年06月16日 02:20/ 0 赞/ 196 阅读

相关 yii2 request 获取相关属性

echo "pathInfo：".Yii::$app->request->pathInfo.'<br>'; echo "hostInfo：".

左手的ㄟ右手/ 2022年05月24日 01:21/ 0 赞/ 223 阅读