来源:第五天  01盒子水平居中

一、盒子中文字控制:

  1.text-align: center; /*可以让盒子内容(文字 行内元素 行内块元素)居中对齐*/

二、让盒子水平居中对齐:

  方法1.margin: 0 auto; /*通俗写法 0 auto  上下是 0  左右是auto  水平居中对齐 */

  方法2. margin-left: auto;   margin-right: auto; /*自动充满*/

  方法3.margin: auto; /* 上下左右都是auto*/

来源:第五天  02外边距合并

一、css初始化

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:; padding:; }
body { font-size:12px; color:#666; font-family:Verdana, Microsoft YaHei, Simsun; background:#fff; line-height:24px; }
fieldset, img { border:; }
ol, ul { list-style:none; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
em { font-style:normal; }
input, button, select, textarea { outline:none; }
textarea { resize:none; }
p{ text-align:justify; text-justify:distribute;}

二、外边距塌陷问题的处理

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
/*border-top: 1px solid pink; 1. 用border*/
/*padding-top: 1px; 2 用padding */
overflow: hidden; /* 3. 用这个单词可以解决,具体单词的意思我们后面讲*/
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

来源:第五天  05圆角练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: #ccc;
}
.radius a {
width: 172px;
height: 172px;
background-color: #fff;
display: inline-block;
margin: 30px;
border-radius: 50%;
text-align: center;
line-height: 172px;
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>
<a href="#">文字内容</a>
</div>
</body>
</html>

---------------------

006.前端开发知识,前端基础CSS(2020-01-21)的更多相关文章

  1. Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  2. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  3. [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...

  4. 前端开发概述+JS基础细节知识点

    一 前端开发概述 html页面:html css javascript 拿到UI设计图纸:切图-->html+css静态布局-->用JS写一写动态效果-->ajax和后台进行交互,把 ...

  5. Vue.js高效前端开发知识 • 【目录】

    持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...

  6. 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破

    我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...

  7. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

  8. 003.前端开发知识,前端基础CSS(2020-01-07)

    一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. ...

  9. 005.前端开发知识,前端基础CSS(2020-01-14)

    一.CSS权重 权重是可以叠加的,事例如下: div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 a:hover -----—> ...

随机推荐

  1. openstack trove weekly meeting时间即将更改

    为了平衡英国.巴黎.德国.美国和中国开发者的作息习惯,openstack trove项目组在5月18日的weekly meeting上开始讨论新的开会时间. 当前的开会时间是,周三 UTC 18:00 ...

  2. Windbg 实践之结合条件断点

    Case 1 1.bu USER32!PostMessageW "r $t0=@$t0+1;.printf\"PostMessageW Call Count:%d\",@ ...

  3. go语言小练习——给定英语文章统计单词数量

    给定一篇英语文章,要求统计出所有单词的个数,并按一定次序输出.思路是利用go语言的map类型,以每个单词作为关键字存储数量信息,代码实现如下: package main import ( " ...

  4. (递归)P1036 选数

    #include<stdio.h>#include<math.h>int x[20],n,k,i; //判断是否质数 int isprime(int n){    for(i= ...

  5. 201771010123汪慧和《面向对象程序设计Java》第十一周实验总结

    一.理论部分 1.栈 (1)栈是一种特殊的线性表,是一种后进先出的结构.(2)栈是限定仅在表尾进行插入和删除运算的线性表,表尾称为栈顶,表头称为栈底.(3)栈的物理存储可以用顺序存储结构,也可以用链式 ...

  6. Django模型基础(三)——关系表的数据操作

    模型之间可以有三种表关系,即一对一,一对多和多对多.表关联之间的数据操作在Django中可以很方便的操作到.在模型中,表关联的字段类型是关联表的实例,而不是字段本身类型.关联字段在数据库中会在其后补上 ...

  7. [CF百场计划]Codeforces Round #617 (Div. 3)

    A. Array with Odd Sum Description You are given an array \(a\) consisting of \(n\) integers. In one ...

  8. C++内联函数作用及弊端

    为什么要使用内联函数? 因为函数调用时候需要创建时间.参数传入传递等操作,造成了时间和空间的额外开销.C++追求效率所以引入了内联的概念. 通过编译器预处理,在调用内联函数的地方将内联函数内的语句Co ...

  9. excel 导出长数据 变成科学计数 解决办法

    加 “\t”

  10. php 去除中间空格

    <?php $str = 'a b c d e'; echo preg_replace('# #','',$str);//输出 "abcde"