发表于： 2019-07-19 03:01:54
2 935
今天完成的事
1.给页眉块级元素添加在宽度大于992px的设备显示的样式
visible-md-block 表示在早中型设备台式电脑（≥992px）可显示
visible-lg-block 表示在大型设备台式电脑（≥1200px）可显示
visible-xs-block 表示在超小设备手机（<768px）可显示
2.删减掉之前全局样式
<body class="container-fluid">
改为每个块级元素单独设置
<div class="container-fluid">
或
<div class="container">
以便于控制样式
3.修改一些样式调整布局
4.学习了再特定屏幕下隐藏的样式
hiden-（lg/sm/md/xs）
5.修改样式
6.完善导航栏样式
7.简单架构第三个部分
8.添加样式完成一个方块
9.初步完成第三部分
明天计划的事
1.完善第三部分
2.学习媒体查询
3.尝试使用媒体查询添加样式
遇到的问题
1.基础不顾扎实
块级元素居中 想了半天愣是没想到margin：auto
今天的收获
1.为什么bootstrap栅格系统要使用row样式的容器包起乱来
.container 是一个容器，在放入其它内容时，左右加上 15px 内边距会自然一些。
但是，当 .container 包含栅格时，每个 .col-* 本身就有左右各 15px 内边距，两边的 .col-* 如果再加上 .container 的 15px 内边距，就与其它 .container 中包含的内容不一致了，所以将栅格包含在一个 .row 容器中， .row 容器使用负外边距将 .container 两边的内边距抵消。
深度思考
task1
1.HTML文件里开头的Doctype有什么作用
DOCTYPE是document type(文档类型)的简写，在Web设计中用来说明你用的XHTML或者HTML是什么版本。
要建立符合标准的XHTML网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
一般放置在html网页代码最顶部
通常html DOCTYPE声明是必须的，而且使用div+css更是必不可少，如果缺少或错误document将会造成你的CSS失效或半失效，即因为css失效，网页布局变乱，有的css属性不能体现。
二、选择什么样的DOCTYP
XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。
分别介绍如下:
1．过渡的
一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2．严格的
一种要求严格的DTD，不允许使用任何表现层的标识和属性。严格的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3.框架的
一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
三、需要注意的问题
没什么特别的，就是一定要将DOCTYPE声明放在XHTML文档的顶部，上面哪怕多个HTML注释标记都不行。
最好示例代码也加上DOCTYPE，否则效果会有差异。
HTML
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
HTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
HTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"
Frameset DTD
Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd"
我们选择什么样的DOCTYPE理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。
2.如何理解盒模型及其content、padding、border、margin？
盒子模型就是css当中一种像盒子一样的抽象概念 可以类比为现实生活中的盒子
对一个网页来说，基本上页面上所有的元素对象，其实际的呈现形式都是一个盒子形状的抽象;
所谓的盒子其实就一个长方形（或者正方形）的抽象。从外到内，他由4层东西组成，分别是margin（间距) ，border（边框），padding（填充），content（内容）。他们的结构特征是一层包裹着一层。
可以把它当成日常中的一个盒子去理解。content就是盒子里装的东西，它有高度（height）和宽度（width）,可以是图片，可以是文字或者小盒子嵌套，在现实中，内容不能大于盒子，内容大于盒子就会撑破盒子，但在css中，盒子有弹性的，顶多内容太大就会撑大盒子，但是不会损害盒子。padding即是填充，就好像我们为了保证盒子里的东西不损坏，填充了一些东西，比如泡沫或者塑料薄膜，填充物有大有小，有软有硬，反应在网页中就是padding的大小了。而再外一层就是border边框，因为边框有大小和颜色的属性，相当于盒子的厚度和它的颜色或者材料。margin外边距，就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子，margin就是盒子堆码直接的距离，可以通风，也美观同时方便取出。
我们理解了盒子模型，有助于我们了解一个元素的最终尺寸是怎么样决定的，同时也帮助我们理解元素在网页上是如何定位的，而盒子模型主要适用于块级元素。
返回列表
评论