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. 安装pygame出现is not a supported wheel on this platform解决办法

    安装python库pygame时出现如下错误: 查看python的版本是否与之匹配,发现版本不匹配问题 例如1.我的python3.6是32位的,就只能安装cp36的:结果发现安装还是出现问题: 2. ...

  2. mysql导出导入数据

    使用sql语句导出数据: 导出时如果不写绝对路径,会提示The MySQL server is running with the --secure-file-priv option so it can ...

  3. 分布式一致性的基石---Paxos算法（1）

    分布式一致性的基石---Paxos算法(1) Paxos算法是由微软的工程师Lamport提出,Lamport依靠Paxos算法获得图灵奖: Paxos算法旨在解决相互信任的分布式系统中,多个节点能快 ...

  4. vue history模式 apache配置

    我的服务器apache 版本是2.4.6 看文档上面说加那些代码,但是加上去重启服务器就不能重启,显示代码错误,然后百度查开启mod_rewrite这个重写URL 弄了半天也不会,百度上面的不知道是不 ...

  5. python可能会用到的网络基础

    网络编程 1.两种构架:(1)C/S构架:client, server (2) B/S构架:browser,server 2.地址相关:(1)MAC地址,物理地址,唯一,但可以更改 (2)ip地址,网 ...

  6. Win7 VS2017编译Audacity2.1.3

    最近比较热衷折腾大型开源软件编译,因为在逐渐用开源软件替换盗版软件,除去盗版用着不安全的原因外,主要还是因为开源软件有源码,可以学习研究,另外就是体积小. 像Matlab每次装完都用不上什么功能,体积 ...

  7. Toggle组件切换开关，控制开关图片显示与隐藏

    UGUI_Image 组件简单笔记 Rect Transform:用于控制 UI 物体的基本属性 Image 基本使用 1.Image 组件是用于显示图片资源的.使用方式有两种:1.显示纯粹的颜色:2 ...

  8. jenkins 使用Git 报错：SSL certificate problem: self signed certificate in certificate chain

    在启动java的脚本上执行 增加参数: -Dorg.jenkinsci.plugins.gitclient.GitClient.untrustedSSL=true 即可!!

  9. python生成exe文件

    安装pyinstaller pyinstaller支持python2和python3 命令行安装:pip install pyinstaller pyinstaller --icon=duoguan. ...

  10. 特征选择 (feature_selection)

    目录 特征选择 (feature_selection) Filter 1. 移除低方差的特征 (Removing features with low variance) 2. 单变量特征选择 (Uni ...