Day5:html和css

如何实现盒子居中问题，要让盒子实现水平居中，要满足是快级元素，而且盒子的宽度要定义。然后数值为auto即可。

.dashu {

 width: 100px;

 margin: 0 auto;

}

盒子的水平居中为

margin: auto;

而文字的水平居中为:

text-align: center;


text-align: center; // 文字水平居中

margin: auto; // 盒子的水平居中

盒子水平居中:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		text-align: center; /*居中对齐*/

		width: 100px;

		height: 100px;

		background-color: blue;

		 /* margin: 0 auto; 自动  水平居中对齐 */

		 /* margin: auto; 上下左右都是auto*/

	}

	</style>

</head>

<body>

	<div>

		达叔小生

	</div>

</body>

</html>


margin: 0 auto; // 通俗

// margin: auto; 上下不显示

清除内外边距

* {

 padding: 0;

 margin: 0;

}

外边距合并:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		width: 200px;

		height: 200px;

		background-color: blue;

	}

	.da{

		margin-bottom: 100px;

	}

	.shu{

		background-color: red;

		margin-top: 150px;

	}

	</style>

</head>

<body>

	<div class="da">1</div>

	<div class="shu">2</div>

</body>

</html>

外边距合并以合并的最大值为准.

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	.father {

		width: 500px;

		height: 500px;

                border: 1px solid red;

		background-color: red;

	}

	.son {

		width: 200px;

		height: 200px;

		background-color: blue;

		margin-top: 50px;

		margin-left: 50px;

	}

	</style>

</head>

<body>

	<div class="father">

		<div class="son"></div>

	</div>

</body>

</html>

content宽度和高度

padding不会影响盒子的大小.

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	.father {

		height: 200px;

		background-color: pink;

		width: 300px;

		/* padding-left: 30px; 给定了宽度,所以padding会撑开*/

	}

	.son {

		padding-left: 30px;

		/*没有宽度不会撑开*/

	}

	</style>

</head>

<body>

	<div class="father">

		<div class="son">dashu</div>

	</div>

</body>

</html>

padding内边距

圆角

border-radius: 50%;


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		width: 300px;

		height: 300px;

		background-color: red;

		margin: 100px auto;

		border-radius: 50%;

	}

	</style>

</head>

<body>

	<div></div>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	body {

		background-color: #ccc;

	}

	.radius a {

	   width: 170px;

	   height: 170px;

	   background-color: #fff;

	   display: inline-block;

	   margin: 30px;

	   border-radius: 50%;

	   text-align: center;

	   line-height: 170px;

	   color: red;

	   text-decoration: none;

	   font-weight: 700;

	}

	.radius a:hover {

		background-color: red;

		color: #fff;

	}

	</style>

</head>

<body>

	<div class="radius">

		<a href="#">文字内容</a>

		<a href="#">文字内容</a>

		<a href="#">文字内容</a>

	</div>

</body>

</html>

盒子阴影

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
属性 说明
h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊距离
spread 阴影的尺寸
color 阴影的颜色
inset 将外部阴影改为内部阴影 
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		width: 200px;

		height: 200px;

	}

	div:hover {

		box-shadow: 0 15px 15px rgba(0,0,0,0.1);

	}

	</style>

</head>

<body>

	<div></div>

</body>

</html>

浮动

float浮动:标准流,浮动,定位.

float可以让多个div在同一行显示.

属性值 说明
left 元素向左浮动
right 元素向右浮动
none 元素不浮动 
选择器 {float: 属性值;}


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	.up {

		width: 200px;

		height: 100px;

		background-color: red;

		float: left;

	}

	.down {

		width: 220px;

		height: 120px;

		background-color: purple;

	}

	</style>

</head>

<body>

	<div class="up"></div>

	<div class="down"></div>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	.father {

		width: 600px;

		height: 600px;

		background-color: blue;

	}

	.son {

		width: 200px;

		height: 200px;

		background-color: red;

		float: right;

	}

	</style>

</head>

<body>

	<div class="father">

		<div class="son"></div>

	</div>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		width: 100px;

		height: 100px;

	}

	.one {

		background-color: red;

		float: left;

	}

	.two {

		background-color: purple;

	}

	.three {

		background-color: blue;

		float: left;

	}

	</style>

</head>

<body>

	<div class="one"></div>

	<div class="two"></div>

	<div class="three"></div>

</body>

</html>

盒子模型布局稳定性

width >  padding  >   margin

浮动(float)

普通流（标准流）、浮动和定位
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动（默认值）

推荐

Day1:html和css

Day2:html和css

Day3:html和css

Day4:html和css

如果看了觉得不错

点赞！转发！

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客： 达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
  • 小礼物走一走 or 点赞

Day5:html和css的更多相关文章

  1. 【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局

    1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...

  2. Day6:html和css

    Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...

  3. 百度前端技术学院-基础-day5.6

    今天学习了关于盒模型.浮动等页面布局的方法. 受到同学的启发,顺便学习了flex的布局. 还了解了一些编码的基本规则. 对我接下来的学习帮助很大. 交作业: HTML : https://github ...

  4. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  5. Day5 CSS基本样式和C3选择器

    Day5 CSS基本样式和C3选择器 一.背景属性 1.背景颜色            background-color:transparent(默认值,透明); 颜色的取值:            ...

  6. Python实例---模拟微信网页登录(day5)

    第六步: 实现发送/接受消息---day5代码 settings.py """ Django settings for weixin project. Generated ...

  7. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

随机推荐

  1. MySQL千万级数据库查询怎么提高查询效率

    在实际项目中,当MySQL表的数据达到百万级别时候,普通查询效率直线下降,而且当使用的where条件较多,其查询效率是让人无法容忍的.假如一个taobao订单查询详情要几十秒,可想而知的用户体验是多差 ...

  2. python json.dumps()函数输出json格式，使用indent参数对json数据格式化输出

    在python中,要输出json格式,需要对json数据进行编码,要用到函数:json.dumps json.dumps() :是对数据进行编码 #coding=gbkimport json dict ...

  3. js二分算法排序

    var arr = [1,2,3,5,10,15,23,35,67,76,78,89,100];var len = arr.length;for (var i = 1; i < len; i++ ...

  4. 我的第一个flink_java程序

    之前看了视频学习第一个flink  word count使用,但是对于socket发送数据作为数据源我这里有点忘记了,加上最近有个项目要发布,一直在忙,所以迟迟无法完成: 1.首先我们要有数据源,因为 ...

  5. navicat for mysql 连接报错1251详细解决步骤

    我的是8.0的版本,因为比较新的mysql采用新的保密方式所以旧的似乎不能用,改密码方式:use mysql:ALTER USER 'root'@'localhost' IDENTIFIED WITH ...

  6. XBee PRO 900HP远距离无线模块

    XBee PRO S3B也称为XBee-900HP无线模块,它是一款工作在频段900~928MHz之间,基于FHSS跳频技术的远距离无线数传电台核心模块.常用型号如下: 类别 型号 开发套件 XKB9 ...

  7. sqlserver存储过程分页记录

    USE [HK_ERP]GO/****** Object: StoredProcedure [dbo].[GetPageBillsByShopID] Script Date: 2018/10/30 1 ...

  8. Qt打包发布exe

    1.首先以 release 方式编译源代码,然后将生成的a. exe 程序放到一个单独的文件夹中. 2.再从开始菜单打开 Qt 命令行工具. 3.在命令行中,进入到第一步中a. exe 程序所在的文件 ...

  9. 第一次OO总结

    作业1——多项式加减法 看到这个名字就开始瑟瑟发抖了,毕竟一年前用C语言让我写这么一个程序都很头疼,什么堆栈啊还有结构都稀里糊涂的,更别说用一个完全没接触过的语言来完成最简单的一次作业.像我这样越老心 ...

  10. Oracle创建物化视图

    1.物化视图语法 create materialized view [view_name] refresh [fast|complete|force] [ on [commit|demand] | s ...