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. Vue添加jquer插件

    一.现象 综合开发需要,需要引用使用 二.解决 1.先安装jquer插件,命令运行: npm i jquery --save-dev (tips:  i  也就是 install --save-dev ...

  2. python学习——用dictionary实现通过地区查询邮编

    刚刚学习了python的基本语法,对自己学习的内容进行实践下. dictionary字典(类似map) 总结:1.dictionary比list读取速度快,但是占用内存大,适合存放不需修改,经常查询的 ...

  3. IDEA debugger模式下启动慢

    很可能是因为代码里面有端点造成的. 点击如下图的重叠红点,找到对应端点点掉就可以了.

  4. HTTP之响应消息Response

    一般情况下,服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息. HTTP响应也由四个部分组成,分别是:状态行.消息报头.空行和响应正文. 例子 HTTP/1.1 200 OK Date ...

  5. DWR使用总结

      这两天学了下DWR,现在总结一下. DWR是方便使用AJAX连接JS和JAVA的的一个框架,把服务器端 Java 对象的方法公开给 JavaScript 代码. 如果是用dwr2.0的jar包,还 ...

  6. IDEA快捷键 日常整理

    F9 : debug Ctrl+” +/- ” : 当前方法展开.折叠 Ctrl+Shift+”+/-” : 全部展开.折叠 Alt+1 : 工程面板 Alt+4:控制台 Alt+7:查看本类方法 S ...

  7. Jmeter如何把响应数据的结果保存到本地的一个文件

    当做性能压测时,可能会需要把响应数据的一些字段统计出来.这里简单介绍一下. 1.首先把接口调通,确定需要统计的字段,这里以统计ccmpSeq字段来做例子. 2.添加正则表达式提取器,用来提取响应结果中 ...

  8. GitHub学习途径

    之前学习GitHub的一个pdf文件 作者是stormzhang 我觉得那个pdf教的很详细,我还没看完,正在学习中,学到了文件的clon和在本机如何更新GitHub的文件. 在此分享一下 下载链接h ...

  9. #2019-2020-4 《Java 程序设计》第七周总结

    2019-2020-4 <Java 程序设计>第七周知识总结 第八章:常用实用类 一.String类 String类的构造方法 public String(byte[] bytes); p ...

  10. 2019.03.09 bzoj4491: 我也不知道题目名字是什么（线段树）

    传送门 题意:给定一个序列A[i],每次询问l,r,求[l,r]内最长子串,使得该子串为不上升子串或不下降子串. 思路: 注意要求的是子串而不是子序列!!! 然后直接用线段树维护最大子段和的方式合并一 ...