蓝鸥零基础学习HTML5第八讲 样式布局一

蓝鸥零基础学习HTML5第八讲 样式布局一

1.浮动到底是什么鬼

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

/*body {

font-size:0px;

}*/

div {

width:100px;

height:100px;

text-align: center;

line-height: 100px;

border:1px solid red;

/*display: inline-block;*/

font-size:16px;

float:right;

}

</style>

</head>

<body>

<!--

display:inline-block;

浮动

float

-->

<div>我是DIV1</div>

<div>我是DIV2</div>

<div>我是DIV3</div>

<div>我是DIV4</div>

</body>

</html>

2.浮动的特性

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

/*div {

border:1px solid red;

float:left;

}*/

/*span {

width:100px;

height:100px;

border:1px solid red;

float: left;

padding:10px;

}*/

/*div {

width: 100px;

height: 100px;

background: red;

float: left;

}

span,strong {

display: inline-block;

width:40px;

height:40px;

border:1px solid yellow;

}

p {

height:50px;

width:400px;

background: pink;

}*/

div{

background: red;

overflow: hidden;

}

h2 {

margin:0;

width:300px;

height:300px;

border:1px solid black;

background: yellow;

float: left;

}

p{

height:300px;

background: blue;

}

</style>

</head>

<body>

<!--

浮动的特性

1.浮动的元素排在同一排

2.浮动的元素内容撑开宽度

3.浮动的元素支持所有的css样式

4.浮动的元素脱离文档流

5.浮动的元素提升层级半级

-->

<!-- <div>div1dfadfa</div>

<div>div2</div>

<div>div3</div>

<div>div4</div> -->

<!-- <span>span1</span>

<span>span2</span>

<span>span3</span>

<span>span4</span> -->

<!-- <div>div</div>

<span>span</span>

<strong>strong</strong>

<p></p> -->

<div>

<h2>我是H2</h2>

</div>

<p></p>

</body>

</html>

3.Bfc

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

/*div {

width:300px;

height:300px;

border:10px solid red;

font-size:24px;

overflow: hidden;

margin:0 auto;

}*/

/*div:hover{

color:blue;

text-decoration: underline;

}*/

/*div:after{

content: "我是伪类";background: red;

}*/

#box1 {

width:540px;

border:10px solid red;

margin:0 auto;

/*height:108px;*/

}

span {

width:100px;

height:100px;

border:4px solid blue;

text-align: center;

line-height: 100px;

float:left;

}

.clear:after{

content: "";display: block;clear: both;

}

</style>

</head>

<body>

<!--

1.overflow 溢出

会重新计算元素的空间

hidden 溢出隐藏

auto   溢出出现滚动条

scroll 出现滚动条的位置

2.元素的居中

margin:0 auto;

3.元素的伪类

伪类:就是CSS一些元素身上的特殊属性

:hover 鼠标停留

:after 在元素内容之后插入一些内容

浮动:其实就是使元素脱离文档流,按照一定的方式排列,遇到相邻的浮动元素或者父级的边界停下来。

BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题

1.父级也浮动

弊端:左右的margin:0 auto; 会失效;

2.父级加display:inline-block

弊端:左右的margin:0 auto; 会失效;

(如果需要让元素居中可以给父级加text-align:center)

3.给父级加高

弊端:扩展性不好

4.br标签

写法:<br/>

作用:换行

5.clear

clear 元素的某一方向不允许出现其他的浮动元素

left

right

both  推荐使用

one

温馨小提示

不符合W3C规范 违反结构 样式 行为 三者分离原则

6.伪类清浮动

:after{

content:"";display:block;clear:both;

}

温馨提示:目前主流方法。建议使用

-->

<!-- <div>【学习进行时】人类同处一个地球,“地球村”的每个成员,如何携手共进?习近平在建党95周年庆祝大会上给出中国方案:“推动形【</div> -->

<div id="box1">

<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

<span>5</span>

</div>

<!-- <div>

我是DIV

<br/>

我是DIV

</div> -->

</body>

</html>

4.提升层级半级

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#box1 {

width:100px;

height:100px;

background: red;

float:left;

margin-right:3px;

}

#box2 {

width:200px;

height:210px;

background: yellow;

}

</style>

</head>

<body>

<div id="box1">div1</div>

<div id="box2">“深港通相关准备工作已基本就绪,国务院已批准《深港通实施方案》。”李克强总理在8月16日的国务院常务会议上明确表示。

  在今年的政府工作报告中,李克强总理提出,要“适时启动深港通”,各方对此普遍期待并寄予厚望。201</div>

</body>

</html>

5.定位是什么鬼

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div {

width:300px;

height:300px;

border:10px solid black;

position: relative;

}

span {

width:100px;

height:100px;

background: red;

text-align: center;

line-height: 100px;

font-size:40px;

position: absolute;

}

.span1{

left:100px;

}

.span2{

top:100px;

}

.span3{

right:0px;

top:100px;

}

.span4{

bottom: 0px;

left: 100px;

}

</style>

</head>

<body>

<div>

<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

</div>

</body>

</html>

时间: 2024-10-12 21:00:53

蓝鸥零基础学习HTML5第八讲 样式布局一的相关文章

蓝鸥零基础学习HTML5第八讲 样式布局二

蓝鸥零基础学习HTML5第八讲 样式布局二 1.定位的属性及特性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width:400px; height:400px; border:10px solid red; margin:0 auto; position: re

蓝鸥零基础学习HTML5第六讲 CSS的常见样式

蓝鸥零基础学习HTML5第六讲 CSS的常见样式 CSS的常见样式 1.css文本样式的设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size:160px; font-family: "sans-Seri

蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换

蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换 1.常见标签-块属性的标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/reset.css"> </head> <

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开

蓝鸥零基础学习HTML5第九讲 兼容性五

蓝鸥零基础学习HTML5第九讲 兼容性五 1.兼容性13 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:400px; } .left { float: left; } .right { float: right; width:400px; } </s

蓝鸥零基础学习HTML5第九讲 兼容性六

蓝鸥零基础学习HTML5第九讲 兼容性六 1.兼容性16 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:200px; height:200px; border:1px solid #000; position: relative; } .box span

蓝鸥零基础学习HTML5第九讲 兼容性一

蓝鸥零基础学习HTML5第九讲 兼容性一 1.兼容性到底是什么玩意 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width:400px; } .left { width:200px; background: red; height:300px; float:left

蓝鸥零基础学习HTML5第九讲 兼容性二

蓝鸥零基础学习HTML5第九讲 兼容性二 1.兼容性4 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { width:100px; height:100px; background: red; } </style> </head> <body>

蓝鸥零基础学习HTML5第九讲 兼容性七

蓝鸥零基础学习HTML5第九讲 兼容性七 1.兼容性19 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #000; } .box { width:400px; height:400px; background: url("img/1.