来源：第五天  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. 阿里巴巴的26款Java开源项目，赶紧戳…

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  2. page-break-before和page-break-after 实现分页打印

    page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方式.每个打印属性都可以设定4种设定值:auto.alway ...

  3. 4. git目录探秘

    HEAD当前指向的分支信息.cconfig,当前仓库的配置信息,core,用户,远程,分支等信息.(命令操作其实就是修改当前config文件)refs---heads,其实就是分支,里面包含所有的分支 ...

  4. vue整合外部js

    vue引入外部jsimport { TrackLine } from "../../../../../static/js/trajectory.js";import { initM ...

  5. spring hystrix和内置tomcat组件的参数调优解析

    1. springboot内置tomcat容器的参数配置 server: port: 12021 # server端的socket超时间(毫秒),使用值-1表示没有(即无限)超时,默认值为60000( ...

  6. 吴裕雄--天生自然ShellX学习笔记：Shell 基本运算符

    Shell 和其他编程语言一样,支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 ...

  7. 分享一套好看的PyCharm Color Shceme 配色方案

    配色方案图1 点击可查看大图 (color shceme 配色文件下载链接已经放在文末) 配色方案图2 配色方案图3 picture1 picture2 整体效果 下载链接 https://files ...

  8. Matlab高级教程_第四篇：Matlab高级函数_关键词:arrayfun

    % 定义一个句柄并用这个句柄求值 h = @sin; h(3) % % 命令窗口返回内容 % h(3) % ans = % 0.1411 %定义一个完整句柄,@参数+表达式的形式,并给句柄传参 h1 ...

  9. 10）global预定义变量

    代码展示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  10. 吴裕雄--天生自然 PYTHON3开发学习：OS 文件/目录方法

    import os, sys # 假定 /tmp/foo.txt 文件存在,并有读写权限 ret = os.access("/tmp/foo.txt", os.F_OK) prin ...