来源：第五天  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. Java web实现综合查询+SQL语句拼接

    首先展示图形界: 界面比较简单,但麻雀虽小五脏俱全.因为数据库只有六种数据类型,所以最多添加六个查询框. 测试以下问题: 删除方式是从上往下开始的,如果删除之后会有问题.(后续改进ing) 若干个并且 ...

  2. 吴裕雄--天生自然MySQL学习笔记：MySQL UPDATE 更新

    如果需要修改或更新 MySQL 中的数据,我们可以使用 SQL UPDATE 命令来操作. 语法 以下是 UPDATE 命令修改 MySQL 数据表数据的通用 SQL 语法: UPDATE table ...

  3. 吴裕雄--天生自然MySQL学习笔记：MySQL 创建数据表

    创建MySQL数据表需要以下信息: 表名 表字段名 定义每个表字段 语法 以下为创建MySQL数据表的SQL通用语法: CREATE TABLE table_name (column_name col ...

  4. Maven--部署构件至 Nexus

    日常开发生成的快照版本构件可以直接部署到 Nexus 中策略为 Snapshot 的宿主仓库中,项目正式发布的构件则应该部署到 Nexus 中策略为 Release 的宿主仓库中. <proje ...

  5. Django模型基础——（二）

    上篇博客主要讲了django中对数据库的增删改查,下面深入再讲解下对数据库的操作. 常用的查询方法 下面以表名为User为例 User.object.first() :返回表中第一条数据 User.o ...

  6. Linux系统相关命令

    时间和日期 date cal 磁盘和目录空间 df du 进程信息 ps top kill 01. 时间和日期 序号 命令 作用 01 date 查看系统时间 02 cal calendar 查看日历 ...

  7. pandas(二)

    1.Series序列 一维的数组数据,构建是传二维数据会报错,数据具有索引,构建时如果不传索引,默认为数字rang索引. series存在列名和索引,sr.at[0]是通过列名来定位数据(iat定位行 ...

  8. 个性化bash

    zsh/on-my-zsh Ubuntu,deepin, 等可以使用  apt install 的系统  apt install zsh 一般就可以自动安装 RedHat(Fedora,Centos) ...

  9. sklearn 缺失值填补（总结）

    首先查看数据形态: data.shape 再查看数据类型和非空值的个数与比例 data.info() 使用SimpleImputer进行填补 from sklearn.impute import Si ...

  10. 编程基础-servlet1

    1.Servelet是什么 sevlet是Server与Applet 的缩写,即服务端小程序.Sun公司提供的开发动态web资源的技术. servelet本质是java类,但遵循Servlet规范,没 ...