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. 分布式之redis

    正文 1.为什么使用redis 分析:博主觉得在项目中使用redis,主要是从两个角度去考虑:性能和并发.当然,redis还具备可以做分布式锁等其他功能,但是如果只是为了分布式锁这些其他功能,完全还有 ...

  2. 使用PHP实现手机端APP支付宝的支付功能

    最近应业务需求,做了支付宝支付和微信支付,今天分享一下手机端app支付宝支付对接流程,实际开发过程是前后端分离,前端调用后端API接口,实现功能返回数据,我所用的跨挤啊为TP5,大致可以分为四步: 1 ...

  3. MySQL 聚合函数 控制流程函数

    常用的聚合函数 1. AVG() 求平均值 mysql> AVG([DISTINCT] expr) -- 返回 expr 的平均值 mysql> select AVG(age) from ...

  4. java之路 定义个一初始值 取它 个位 十位 百位 千位。。的数值。

    class Demo{ public static void main(String[] args){ int i =2584; //do{ int g = i%10; int s = (i%100) ...

  5. Java实现产生一个int数组，长度为100，并向其中随机插入1-100，并且不能重复。

    public static void main(String[] args){ //创建一个int数组,长度为100, int n = 100; int[] arrayInt = new int[n] ...

  6. 关于canvas补充说明

    上篇文章提到的canvas画布,用到f2组件,组件地址https://gw.alipayobjects.com/os/antv/assets/f2/3.0.0/f2.js或利用npm下载:npm in ...

  7. Newtonsoft.Json 时间格式化

    时间序列化经常多个T:“2017-01-23T00:00:00” 解决方案: 日期格式化输出,指定IsoDateTimeConverter的DateTimeFormat即可 IsoDateTimeCo ...

  8. Python小技巧：运行目录或ZIP文件

    在写Python程序时,将不同功能代码写在不同文件中是一个好习惯,但是对于某些情况.如需要将脚本提供给别人运行使用,如若将程序写在几个文件中,则需要将文件都发给他人.别人就需要管理不同文件,这样对于别 ...

  9. jsonp 简单封装

    import originJSONP from 'jsonp' // 引入 jsonp 模块 // 对外暴露方法 jsonp // 通常传给服务端的 url 地址带参数 设计目的是希望有纯净的 url ...

  10. linux从0开始----01

    1.VMware 虚拟机安装与卸载 推荐安装较高版本,11.x以后的.本课程安装12.x版本,需要序列号. 2.在vmware中安装centos客户机.初学者选择典型安装也可以. 1.vware文件菜 ...