CSS的基础样式

  • border 边框

复合写法

border：border-width  border-style border-color；

border-width:边框宽度 top right bottom left

border-style:边框样式  solid实线 dashed虚线 dotted 点线（点线IE6无法识别）

border-color:边框颜色/英文单词/十六进制/RGB

border-radius 圆角

border:transparent透明（可以写在复合写法里）

n 边框并不是一条直线，而是三角形。

  • padding 内边距，内填充

padding-top上内边距 padding-right右内边距

padding-bottom下内边距 padding-left左内边距 （顺序：上右下左   顺时针）

padding复合写法

padding:10px; 只写一个值表示：上右下左都是10px;

padding:10px 20px; 两个值：第一个值代表上下   第二个值代表左右

padding:10px 20px 30px; 三个值：第一个值代表上 第二个值代表左右 第三个值代表下

padding:10px 20px 30px 40px; 四个值：第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左

  • margin 外边距

margin-top上内边距 margin-right右内边距

margin-bottom下内边距 margin-left左内边距 （顺序：上右下左   顺时针）

其他如padding 一致

标签的嵌套 确定父子级关系

  • margin的例外

　　1.第一个自己的margin-top会在特定的情况下穿透父级

规避方法：

①　给父级加边框

②　给父级加overflow:hidden;（溢出隐藏）

③　不要用margin-top，父级的padding-top代替

　　2.兄弟关系的margin-top和margin-bottom会叠压

规避方法：只设置一个 top或 bottom

一、CSS的基础样式的更多相关文章

  1. css 的基础样式--border--padding--margin

    border 边框复合写法 border:border-width border-style border-color; border-width 边框宽度 border-style 边框样式:sol ...

  2. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  5. HTML&CSS基础-样式的继承

    HTML&CSS基础-样式的继承 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...

  6. 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式

    1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...

  7. CSS（网页样式语言）基础

    所谓全栈,个体可以独立地完成系统的设计.开发.测试.部署以及运维.打通一个领域从无到有的全过程. 为什么会有 markdown 文本编辑显示工具呢,因为 html 太重了.markdown 是 htm ...

  8. 原创：新手布局福音！微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  9. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

随机推荐

  1. 清空所有Session

    //清空所有Session request.getSession().invalidate();

  2. HDU 1249 三角形的分割

    可以将三角形的三条边一条一条加进图形中观察 假设添加第n个三角形 前n-1个三角形将区域划分为sum[n-1] 第n个三角形每条边最多能经过前n-1个三角形每条三角形的两条边 , 一条边切完增加了 2 ...

  3. validate针对checkbox、radio、select标签的验证

    jQuery.validate 是jquery的一个插件,用来辅助开发者在客户端方便快捷的实现表单验证,最终达到提高用户体验的目的. 示例代码 <form id="formLogin& ...

  4. HDU——1133 Buy the Ticket

    Buy the Ticket Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  5. Bestcoder #92

    A =w= B 计数题,枚举A.C,算B.D的个数,注意减去重复的 我当时是f[1][n]->f[2][n]->f[3][n]->f[4][n]递推的 C 题意:长为n的字符串仅由' ...

  6. UnicodeEncodeError: 'gbk' codec can't encode character '\u2022' in position

    在GBK解码时忽略掉不能解码的数据 self.file.write(content.encode("gbk", 'ignore').decode("gbk", ...

  7. Ubuntu 16.04安装WPS

    1.下载 http://community.wps.cn/download/ 根据需要对应版本进行下载deb包. 2.安装 sudo dpkg -i wps-office_10.1.0.5672~a2 ...

  8. ubuntu16.04 卸载 php7并安装php5.6记录

    ubuntu16.04版本从默认源安装的php版本为7.x版本,我们都知道php7.0已经舍弃了很多旧版本的函数等内容,这对旧系统来说是致命的,那么,我们就有了安装旧版php的需求,而同一主机安装两个 ...

  9. golang中channels的本质详解，经典!

    原文:https://www.goinggo.net/2014/02/the-nature-of-channels-in-go.html The Nature Of Channels In Go 这篇 ...

  10. JS执行环境栈及事件循环机制—简洁明了的讲解

    JavaScript解释器在浏览器中是单线程的,这意味着浏览器在同一时间内只执行一个事件,对于其他的事件我们把它们排队在一个称为 执行栈(调用栈) 的地方.下表是一个单线程栈的抽象视图: 我们已经知道 ...