来源：第五天  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初始化

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     .father {
  8.         width: 500px;
  9.         height: 500px;
  10.         background-color: pink;
  11.         /*border-top: 1px solid pink; 1. 用border*/
  12.         /*padding-top: 1px;           2 用padding */
  13.         overflow: hidden;  /*         3. 用这个单词可以解决，具体单词的意思我们后面讲*/
  14.     }
  15.     .son {
  16.         width: 200px;
  17.         height: 200px;
  18.         background-color: purple;
  19.         margin-top: 50px;
  20.         margin-left: 50px;
  21.     }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="father">
  26.         <div class="son"></div>
  27.     </div>
  28. </body>
  29. </html>

来源：第五天  05圆角练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     body {
  8.         background-color: #ccc;
  9.     }
  10.     .radius a {
  11.        width: 172px;
  12.        height: 172px;
  13.        background-color: #fff;
  14.        display: inline-block;
  15.        margin: 30px;
  16.        border-radius: 50%;
  17.        text-align: center;
  18.        line-height: 172px;
  19.        color: red;
  20.        text-decoration: none;
  21.        font-weight: 700;
  22.     }
  23.     .radius a:hover {
  24.         background-color: red;
  25.         color: #fff;
  26.     }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="radius">
  31.         <a href="#">文字内容</a>
  32.         <a href="#">文字内容</a>
  33.         <a href="#">文字内容</a>
  34.         <a href="#">文字内容</a>
  35.     </div>
  36. </body>
  37. </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. pytorch安装及基本用法

    20180425更新  安装pytorch0.4.0: conda uninstall pytorch # 如果是CUDA版本的话 conda uninstall cuda80 cuda90 # 如果 ...

  2. 修改maven默认仓库（即repository）的路径

    原文链接:https://blog.csdn.net/ideality_hunter/article/details/53006188 简要说明:主要操作为新建仓库路径,在maven的conf目录下修 ...

  3. RewriteEngine On

    RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond ...

  4. HTML5 可缩放矢量图形（2）—SVG基础

    参考文档——权威 SVG常识 渲染顺序——后来居上:越后面的元素越可见 单位——可以指定,也可以不指定,默认px,其他:em.%.cm.mm... SVG画布——绘制图像的区域,无限大 SVG视窗—— ...

  5. nodejs（6）express学习

    1.简单认识express express::一个快速的网站开发框架,封装了原生的http模块,用起来更方便:API更人性化 特点 基于Node.js平台之上,进一步封装了 http 模块,从而提供了 ...

  6. dockerfile---apt-get install vim 时 Unable to locate package vim

    在学习 dockerfile 的时候,发现编写的 Dockerfile 中的 apt-get install 命令无法找到要安装的包,所以记录一下这次发生的错误. 环境:宿主机:windows 10 ...

  7. jboss的JVMroute记录

    jboss5的nodename是在 /usr/local/jboss-5.1.0.GA/server/dms/deploy/jbossweb.sar/server.xml   这里的  jvmrout ...

  8. 寒假day15

    今天完成了毕设的人才动态模块,同时刷了计算机网络的相关面试题

  9. python刷LeetCode：3.无重复字符的最长子串

    难度等级:中等 题目描述: 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 ...

  10. Python—使用列表构造队列数据结构

    队列的概念 只允许在一端插入数据操作,在另一端进行删除数据操作的特殊线性表:进行插入操作的一端称为队尾(入队列),进行删除操作的一端称为队头(出队列):队列具有先进先出(FIFO)的特性. # _*_ ...