美文网首页
Css基础第三天

Css基础第三天

作者: 嗨黄先生 | 来源:发表于2017-09-21 20:34 被阅读0次

1、行高

◆浏览器默认文字大小
浏览器默认文字大小:16px
行高:是基线与基线之间的距离
行高=文字高度+上下边距
一行文字行高和父元素高度一致的时候,垂直居中显示。
总结:单位除了像素以为,行高都是与文字大小乘积。
总结:不带单位时,行高是和子元素文字大小相乘,em和%的行高是和父元素文字大小相乘。行高以像素为单位,就是定义的行高值。
◆推荐行高使用像素为单位。

2、盒子模型

2.1、边框 border

border-top-style: solid   实线
                 dotted  电线
                 dashed  虚线
border-top-color:  边框颜色
border-top-width:  边框粗细

◆边框属性的连写
特点:没有顺序要求,线型为必写项。

border-top: red  solid 5px;

◆四个边框值相同的写法

border:12px solid red;

特点:没有顺序要求,线型为必写项。

2.2、边框合并 border-collapse:collapse;

table{
  width:300px;
  height:500px;
  border:1px solid red;
  border-collapse:collapse;
}
  td{
  border:1px solid red;
}

2.3、获取焦点


label for id 获取光标焦点

2.4、内边距

Padding-left | right | top | bottom


◆padding连写
Padding: 20px; 上右下左内边距都是20px
Padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
◆内边距撑大盒子的问题
影响盒子宽度的因素
内边距影响盒子的宽度
边框影响盒子的宽度
盒子的宽度=定义的宽度+边框宽度+左右内边距
◆继承的盒子一般不会被撑大
包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。

2.5、外边距

margin-left | right | top | bottom


◆外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px 30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
◆垂直方向外边距合并
两个盒子垂直一个设置上外边距,一个设置下外边距,取的设置较大的值。
◆嵌套的盒子外边距塌陷
解决方法: 1 给父盒子设置边框
2给父盒子overflow:hidden; bfc 格式化上下文

3、fireworks的基本使用

新建文件 ctrl+n
打开文件 ctrl+o
调出和隐藏标尺 ctrl+r
清除辅助线: 视图---辅助线----清除辅助线
放大镜 z 放大镜状态下alt+鼠标左键 缩小
抓手 快捷键 空格
测量距离
★先拉出2根辅助线
★切换到指针工具
★将光标放到2根辅助线之间,按住shift键

相关文章

  • Css基础第三天

    1、行高 ◆浏览器默认文字大小浏览器默认文字大小:16px行高:是基线与基线之间的距离行高=文字高度+上下边距一行...

  • CSS 基础_第三天

    请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 如果您觉得这篇文章还...

  • CSS学习资源

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 【2016年特别福利】史上最全CSS学习资料大全

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • react学习路线图

    基础 HTML学习 HTML 基础学习 HTML 基础CSS学习 CSS 基础在上一步练习的基础上为页面添加样式使...

  • CSS初识

    CSS基础

  • css大纲

    css 基础 CSS 简介 在 html 中使用 css link 和 @import CSS 选择器 CSS 优...

  • CSS第一小节第一天

    CSS基础入门 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) CSS通常...

  • CSS第一天

    CSS 什么是CSS 为什么要学习CSS CSS基础语法 CSS使用方法 CSS选择器 CSS继承和层叠 CSS优...

  • CSS

    Javaweb第三天笔记 [TOC] 内容回顾 什么是CSS:层叠样式表 CSS的作用:对网页进行美化 CSS选择...

网友评论

      本文标题:Css基础第三天

      本文链接:https://www.haomeiwen.com/subject/ttvasxtx.html