前端Div+Css的布局方式
Div
div:<div>div>是块标签，它会占据一整行的空间
span:<span>span>是行内的块标签，它可以选中一整行中的部分元素Css
1，Css的添加方式
①内嵌的方式
<div style="height:1cm;background-color: yellowgreen;">我觉得OKdiv>②内部添加的方式
<div id="id1">我觉得还行！！div><style>
#id1{
background-color: darkred;
height: 60px;
}
style>③连接外部样式的方式
<div id="id2">很棒！div>链接外部文件："stylesheet" href="css/index.css" type="text/css"/>index.css内容：
#id2{
background-color: lightseagreen;
width: 100px;
}
2，选择器（指明对哪个元素或哪个部位进行修改）
2.1常用选择器：
①id选择器：
<div id="taobaoId">淘宝div>
②class选择器：
<div class="JD1Class JD2Class">京东div>
③元素选择器：
span{
background: fuchsia;
}
④属性选择器：
<span arr="test">虎牙span>
span[arr="test"]{
background-color: wheat;
}2.2 选择器优先级
①多个不同的样式作用于一个元素，样式会叠加，相同的样式，根据代码的距离远近采用最近原则展示
②多个选择器作用于一个元素，选择器的作用范围越小，其优先级越高。如id选择器>属性选择器>元素选择器>class选择器3，了解的选择器
后代选择器：
<div>
<span>888span>
div>
div span{
background-color: brown;
}锚伪类选择器：
"#">rrr
a:link{
color: #8A2BE2;
}
a:visited{
color: #A52A2A;
}
a:hover{
color: #F5DEB3;
}
a:active{
color:gold;
}4，修改元素或部位。（对哪个元素或部位如何修改？）
①改变字体：font-xxx,如字体大小，字体类型等
② 改变文本：改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
color:文本颜色
line-height:行高
text-decoration:向文本添加修饰
text-align:文本对齐
③ 改变列表：
list-style-type:设置列表项类型。如排列顺序用字母或数字等
list-style-image:设置图片为列表项类型，用到url函数url(“图片路径”);
④ 改变背景
background-color:设置背景颜色
background-image:设置图片为背景,用到url函数url(“图片路径”)
⑤ 尺寸
width:设置宽
height:设置高
⑥ 显示元素的类型
display:none 隐藏该元素
display:black 将该元素定义为一块，类似div的作用
display:inline 将该元素定义为内联元素，类似于span的作用
⑦设置框模型的属性
内边距为：元素到边框距离，padding
边框为：border
外边距为：元素间距离，margin
其中，边框border的简写风格为：
border:宽度 类型 颜色
如border:5px solid red 5，元素或哪个部分如何布局
①float:使元素浮动
clear:清除浮动
②对于同一行的元素，可通过比例调整布局
<div class="outside">
<div class="inner">1div>
<div class="inner">2div>
<div class="inner">3div>
div>
.outside{
width: 100%;
}
.inner{
float: left;
width:33.3%
}③在调整时，发现添加了修改语句，但还是没效果，那可以逐层修改状态，去找其的外层Div，修改外层Div的状态。
④调整布局：一般都是先确定浮动对象，然后再设定宽度比例，然后再设置排列方式，高度。然后重复操作。float浮动->width设比例->排列如text-align:center->设置高度