<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="购物" content="京东购物">
<title>hello_react</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: brown;
/* border-width: 10px 20px 30px 40px;
border-color: burlywood;
border-style: solid;
上面的简写
*/
border: solid 10px blue;
padding: 10px 10px 30px 40px;
/*
外边距 设置左和上会移动自身元素， 设置下边会移动其他元素。
设置右边 暂时无任何效果。
*/
margin-top: 100px;
margin-left: 200px;
}
.inner {
width: 100%;
height: 100%;
background-color: green;
}
/*
水平元素布局 必须满足
子元素的 margin-left + border-left +padding-left+width +padding-right+border-right+margin-right = 父content的宽度
等式不成立会成为过渡约束,会自动调整不等式。
调整:这7个值没调整auto，会自动调整margin-right
设置auto，调整auto 那个值，使等式成立
width: 默认值 100% = auto
width、margin 都设置为auto，width 会调整到最大，margin为0
width>margin-left = margin-right
水平居中: margin-left: auto + width :px + margin-right :auto
*/
.box2 {
width: 800px;
height: 200px;
background-color: brown;
}
.inner2 {
width: 300px;
margin-left: auto;
margin-right: auto;
height: 200px;
background-color: green;
}
/*
垂直方向布局:
如果子元素超过父元素内容区大小，子元素溢出
overflow属性处理溢出,auto 是根据需要生成滚动条
*/
.box3 {
width: 800px;
height: 200px;
background-color: brown;
overflow: hidden;
}
.inner3 {
width: 300px;
height: 300px;
background-color: green;
}
/*
相铃垂直外边距重叠 margin-bottom 与 margin-top
兄弟元素:两者之间的较大值
父子元素: 需要去处理
相邻的子元素 边距 会传递给 父元素。
*/
.box41,.box42 {
width: 200px;
height: 200px;
}
.box41 {
background-color: green;
margin-bottom: 100px;
}
.box42 {
background-color: red;
margin-top: 200px;
}
.box43 {
width: 200px;
height: 200px;
background-color: green;
}
.box44 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 10px;
}
/*行内元素布局
1.宽高设置无效
2.pading 不会影响布局。
div 块布局是会影响的。
display 来改变,上下布局
inline-block：属性是不会独占一行
*/
.s1 {
width: 100px;
height: 100px;
padding: 50px;
display: block;
background-color:green;
}
.box5 {
width: 100px;
height: 100px;
background-color: red;
}
/*去掉默认浏览器的*/
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
/*浮动
通过浮动可以使一个元素向其父元素的 左侧或者右侧移动
float 水平布局的公式不需要成立了
在文档流不在占据位置。
*/
.box61 {
width: 100px;
height: 100px;
background-color: red;
float: right;
}
.box62 {
width: 100px;
height: 100px;
background-color: green;
}
/*
定位
position:
relative;
top 不会影响整体布局。margin-top会影响。
垂直方向 通常只使用 top或者bottom
参照之前的位置的进行偏移
absolute:
脱离文档流
提升元素层级
行内会变成块，块的宽度由内容撑开
相对于包含块进行定位的
{
1.包含块的当前元素 最近的块祖先元素
<div><span><elem><span><div> div是包含块
2.绝对定位的包含块 近开启定位的祖先元素
}
固定定位 小广告
{
1.永远参照浏览器的视口进行定位
2.不会随着滚动条的滚动
}
*/
.box71 {
width: 100px;
height: 100px;
background-color: red;
}
.box72 {
width: 100px;
height: 100px;
background-color: green;
/*position: relative;*/
position: fixed;
top: 10px;
left: 10px;
}
.box73 {
width: 300px;
height: 300px;
background-color: orange;
}
/*
flex布局
display:{
inline-flex:跟span会合并一行
flex：独占一行
}
浮动 会导致高度坍塌 放置水平
主轴；弹性元素排列方向
侧轴/交叉轴: 与弹性元素排列方向垂直的方向
{
grow 1 2 0 ,1、2 会按照比例 占据其他空间
flex-shrink: 1 2 0; 0不压缩，1，2 按值越大压缩的越厉害。当父元素空间不够子元素填充的。
flex-direction
flex-wrap: wrap; 沿着交叉轴换行
flex-flow = {
flex-direction: row;
flex-wrap: wrap;
}
主轴上元素的排列
justify-content {
}
}
flex: {
default:0(grow) 1(shrink) auto(basic)
auto: 1 1 auto
}
*/
.div1 {
width: 200px;
height: 100px;
background-color: tomato;
}
.box8 {
/* width: 200px; */
border: yellow 10px solid;
display: flex;
/* flex-flow: row wrap; */
/* justify-content: space-around; */
align-items: flex-end;
}
.box81 {
width: 300px;
height: 100px;
background-color: red;
/* flex-grow: 1;
flex-shrink: 0; */
}
.box82 {
width: 300px;
height: 100px;
background-color: green;
/* flex-grow: 2;
flex-shrink: 0; */
}
.box83 {
width: 300px;
height: 100px;
background-color: orange;
/* flex-grow: 3;
flex-shrink: 0; */
}
/*
CSS
选择器+声明块
*/
p {
color: tomato;
}
/*
#选择器+声明块
id #
class .:可以重复使用 一组
. . class =“ pblue pfont” 空格合并使用
*/
#pid {
color: orange;
}
.pblue {
color: blue;
}
.pfont {
font-size: 20px;
}
/*
* 是通配符
* {
color: blue;
}
*/
</style>
</head>
<body>
<ul class="box8">
<li class="box81">
box81
</li>
<li class="box82">
2
<div class="div1">2</div>
</li>
<li class="box83">
<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>
</li>
</ul>
<span>ssddds</span>
<div>ss</div>
<!-- 6级标题 -->
<h1 >标题1</h1>
<h2 >标题2</h2>
<!-- p段落 em标签 语义加重
em 类似这种 不会独占一行的 叫 行内元素，一般包裹文字
独占一行 叫块元素
块 放行内元素。块元素 除<p> 都能放元素
-->
<p>我是段<em>落天气</em>不错</p>
<p id = "pid">我是段落2</p>
<p id = "pid">我是段落3</p>
<p class = "pblue pfont" >我是段落4</p>
<p class = "pblue">我是段落5</p>
<a href="http://www.baidu.com">百度</a>
<img src="">图片</img>
</body>
</html>
网友评论