六日目のノートオン

学習目標

フロート
それでも一緒に

なぜ浮動どこかに使用することができます
+フロートは、問題がどのように解決するために何をもたらすの

フロート

3つの基本的な方法のレイアウト：

表示ボックスの流動特性に応じた標準的なラベルはデフォルトの標準ストリームであります
浮動ストリームに配置されたフローティング・ボックスを使用して浮動ストリーム
位置決めボックスによって位置決めされたビットストリームは、ストリームを配置します

フローティング意味

浮動グラフィックラップをすることの始まりです。
フローティングレイアウトシナリオ：行、左または右に直接要素をしてみましょう

浮動プロパティ分析：

浮動要素は「オフマーク」になります
ターゲット要素オフ性能インラインブロックを持っています

標準の流れからオフマーク:(）

标准流：块元素单独占一行，行内元素可以排一排的这种默认的盒子排列方式就是标准流 （按照默认的规则排列的）

1. 脱标的元素不占标准流的位置
2. 不会继承父级的的宽度，内容有多个就撑多大 （不论前身块级还是行内）
3. 可以直接写宽高 （不论前身块级还是行内）
4. margin:auto对于脱标元素不起作用

（標準的なフローのうち、及び他の標準ボックスフローをカバーする、位置を考慮しない）被検体特性をオフに浮遊するので、
それほど使用の数式がある：浮動フルフロートする（兄弟が浮遊している場合、浮遊します）

機能のその他の詳細：

1. 浮动是在盒子内容区域浮动，不会超出padding区域（水平方向）
2. 浮动的盒子一排装不下的时候会掉下来（掉下来的位置会根据上一个浮动盒子的高度决定）
3. 右浮动会颠倒盒子顺序
4. 浮动的盒子压不住文字和图片
5. 尽量在标准流的盒子里面浮动

フローティング閉鎖

引き起こされる問題をフローティング：山車は、親コンテナを開いて保持していません

ソリューション（クローズフロート）：

1. 强行给父盒子添加高度 （不推荐，不利于后期维护）
2. 创建一个新的块级盒子放在浮动元素的最后面，给这个盒子添加一个css属性：clear:both;（不推荐，会产生一个多余的盒子）
3. 用伪元素闭合浮动 （推荐，书写一个公共类就可以使用）
4. 给父元素添加overflow:hidden; (在某些特定场景下使用不了)

擬似要素

このボックスは、さらに、目の前に、または現在のCSS要素のコンテンツの背後ボックスによってレンダリングされます

擬似要素特性：

1、伪元素由css渲染  所以不会增加你的DOM（html结构）开销
2、伪元素默认是行内元素 可以进行转块等处理
3、伪元素不管有没有内容  content这个值一定不能少 即使没有 也要写个空
4、伪元素 官方推荐写::  但是为了兼容考虑 写成单冒号
5、因为伪元素是css渲染  所以JS获取不到

クリア擬似要素フロート完全なコード：

.clearfix::after {
    content:'';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}
.clearfix {
    *zoom:1;
}
或者
.clearfix:before,
.clearfix:after { 
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* 为了兼容IE6,7 */
.clearfix {
    *zoom:1;
}

心のバージョン：

これは、特定の値の制約のWebページです

なぜ、心のバージョンがありますか？

コンピュータの画面が大きいようではありませんので、別のコンピュータ上で同じ視覚効果のために、私たちは心の制約バージョンとして必要

コアのパブリッククラスのバージョンが設定されました

.container {
    width: 1280px;
}

<div class="container"></div>

特殊なケース：

设计师会给你一张很大的图片 1920 * 1000  (是为了适应不同的屏幕) 
但是版心只有1280 

问：图片怎么处理

答：这个盒子不做约束 width:100%;  这个图片作为背景图片放到这个盒子里面 
同时background-position:center 0;

統合されたプロジェクト：まだ一緒に

psの使用

基本設定：

1、ctrl+k  打开首选项----单位与标尺--- 将单位都改成像素
2、V工具状态下 在属性栏里面干掉自动选择 同时将组设置为图层
3、在Z工具状态下 去掉细微缩放

スライスツールを使用します

切片工具：c
c是一个工具组 我们需要的是里面的切片工具 
shift + c 切换切片工具组
临时切换到切片选择工具：在切片工具下，按住ctrl不放，会临时将切片工具转换成切片选择工具
打开标尺 ctrl+r

怎么切片：用c工具框选对应的图片区域出来，利用三键+s （ctrl+shift+alt+s）导出切片  在导出的过程中选择“选中的切片”

HTMLとCSS（6）