HTML5+CSS3学习日志--day3

css书写顺序：

盒子模型属性

文字样式

圆角阴影

（十五）标准流（文档流）

标签在页面中默认的排布规则（如：块元素独占一行，行内元素可一行显示多个）

（十六）浮动

1.让块级元素水平排列

属性名：float

属性值：left（左对齐）、right（右对齐）

特点：顶对齐 具有行内块的特点（加宽高有效），图中img为行内级标签（加宽高无效）

注：1.浏览器会认为加了浮动的块元素不存在（因为该元素脱离了标准流的范围）因此

当只有一个块元素加浮动时会出现以下情况：（脱标现象）

因此要么都用浮动，要么都不用

2.如果父级的宽度不够，浮动会跳到下一行，解决方式：增大父级宽度（可通过减小外边框，内边框方式）

练习经验：遇到多个小型块元素时大多用无序列表来排列，注意消除项目标记list-style:none;

2.清除浮动：（清除浮动带来的影响）

浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度，将导致页面布局错乱

（父级没有高度，浏览器将认为父级不存在，不显示父级）

解决方法：

（1）.额外标签法（了解）

在父元素内容的最后添加一个块级元素，设置css属性 clear:both;（清楚左右两侧浮动，也可left/right）

一般设这个块级元素的类名为clearfix（作用为清除浮动）

（2）.单（伪元素)法

也是在父级元素最后加块级标签，设置clear:both; 但是用伪元素法

.clearfix::after {

content="";

display:block;

clear:both;

}

}

（3）.双伪元素法（推荐）

before 解决外边距坍陷问题，after 清除浮动

.clearfix::before,.clearfix::after {

content:'';

display:table;

}

.clearfix::after {

clear:both;

}

（4）.overflow

父级元素添加CSS属性 overflow：hidden；

（浏览器会查找父级范围因而能找出隐藏的父级并显示）

拓展：浮动本质作用时实现图文混排效果

（十七）Flex布局

1.简介

Flex布局也叫弹性布局，适合结构化布局，不会产生脱标现象，使页面布局更简单，更灵活。（父级盒子会被内容撑开）

设置方式：display:flex; 子元素可以自动挤压或拉伸。

组成部分：弹性容器、弹性盒子、主轴（默认水平方向，弹性盒子默认主轴排列）、侧轴/交叉轴（默认为垂直方向）

2.主轴对齐：（默认水平）

属性名：justify-content

属性值：

space-between：浏览器将父级(容器)剩余部分平均分配给了间距。（弹性盒子之间的距离相等）

space-around：间距出现在弹性盒子的两侧，弹性盒子之间的距离时两端的两倍。

space-evenly：各个间距均相等。

3.侧轴对齐（默认垂直）

属性名：align-items:弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

stretch：若盒子在侧轴方向有尺寸则该属性值无效（常用）

center(常用)

4.修改主轴方向

属性名：flex-direction

属性值：

5.弹性伸缩比（*）

作用：控制弹性盒子的主轴方向（默认水平）的尺寸

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

默认情况下，主轴方向（默认水平）的尺寸是靠内容撑开，侧轴默认拉伸。

6.弹性盒子换行

弹性盒子可以自动挤压或伸缩，默认情况下，当大量弹性盒子都在一行显示，各自的宽度会自动缩小。

属性名：flex-wrap；

属性值：wrap（默认情况nowrap）

7.行对齐方式

属性名：align-content

属性值：（与主轴相同）

注：对单行不生效（因此需要和flex-wrap:wrap;连用）

三、网页练习

（一）项目目录

LearnWeb1为根目录，包含了当前网站的所有素材，图片、css文件，html文件

images：存放固定使用的素材（logo 、样式修饰图）

uploads：存放非固定使用的图片（商品图、宣传图，需要上传的）

base.css:基础公共样式（可在网络上直接搜）

index.css:自定义样式

版心类名：wrapper

（二）制作步骤

1.布局思路： 2.css规划思路：

整体->局部 画布局（宽高背景色）

外->内 实现布局（flex，内外边距）

上->下 细节定位（图片，文字等）

左->右

（三）首次制作细节总结

1.logo 制作技巧

logo功能:

单击跳转跳转到首页

搜索引擎优化：提升百度搜索排名

实现方法：

标签结构：h1>a>网站名称（搜索关键字，需隐藏）

html代码：

<h1 class="logo">
    <a href="">学成在线</a>
</h1>

css代码：

.logo {

width:

height：

background-image:url("");

/隐藏关键字/

font-size:0;

}

2.导航制作技巧

功能：单击跳转

实现方法：

标签结构：无序列表加超链接形式

<div>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

3.给某个容器添加flex布局时，子级空间会撑大到整个父级固定好的高度/宽度/空间

关于flex:1 的理解-----还没太看懂，但是若一个弹性容器内只有一个弹性盒子设置了flex:1,那么该元素将占用除开其他元素所占空间外的全部空间。

flex:为flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis的缩写，默认值为：0 1 auto;

4.background-color:transparent；设置背景色透明

5.outline:none;可去掉焦点框

以下的黑框为焦点框，当点击输入框时显示，

6.当需要改变input中的placeholder的字体属性时可用

input::placeholder {

font-size:;

color:

}

注：不需要写content=""。

7.当父级设置为flex布局时，子级中的元素都将成为一个个的弹性盒子（加宽高生效）

如：a、img这样的行内元素，在父级为flex布局的情况下，设置宽度和高度也生效。

如同块级元素。

8.单行文字居中可用：

line-height:父级行高;<!--类似于垂直居中-->

text-align:center;<!--行内块和行内水平方向对齐方式-->

vertical-align:middle;<!--行内块和行内垂直方向对齐方式-->

9.在flex布局下，父级内所有元素居中

主轴居中:justify-content:center;

侧轴居中:align-content:center;

指定元素侧轴居中:align-self:center;

10.margin: 0 auto;

让块级元素以及它里面的所有元素在页面居中显示。

11.块级元素默认宽度是父级宽度的100%（除去内边框），行内级元素高度靠内容撑开（如设置ul li中的a<!--超链接标签-->中文字属性和边框）

12.重点短句可用<strong></strong>标签包裹

13.数字变量、小的图样可用<i></i>标签包裹

14.页面上具有相同样式的块使用相同的类名