CSS布局相关（自用，非常乱七八糟的笔记）

最新推荐文章于 2023-09-12 18:53:50 发布

十方魔

最新推荐文章于 2023-09-12 18:53:50 发布

阅读量528

点赞数

分类专栏：前端/CSS 文章标签： css3 css 布局

本文链接：https://blog.csdn.net/github_36487770/article/details/70210307

版权

前端/CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

流程：看了一遍相关的MDN，挑重点看了点博客，做了做实验，最后瞎搞了一点笔记
评估方式：看代码能猜出布局，看布局能写代码？
加成：随便看看SASS
1.
float
看了啥：
MDN 没啥东西
ALL ABOUT floats from css3 tricks 东西比较多废话也比较多

value:
float: left;
float: right;
float: none;
float: inline-start; left side on ltr scripts and the right side on rtl scripts 跟文字方向有关
float: inline-end;
最后这倆只有火狐45以上支持，先别用

脱离正常文档流但仍是其一部分仍然是其一部分这点contrary to abosolute positioning，absolute是完全忽略
part of it???
位置撞到父容器或者另一个float元素停止

浮动元素的父元素如果没别的了会折叠COLLAPSE
也叫溢出，非IE下发生
这里写图片描述
We fix it by clearing the float after the floated elements in the container but before the close of the container.
如何清除：
对浮动元素下面存在的元素/搞个空元素，然后clear:both
or
对浮动元素的父元素 overflow：hidden/auto
overflow不但可以切掉过长的content还可以包裹住短的content
(expand to contain them but no drop out of it )?????
没用啊，字短的话还是掉下来了。？？？？
p 和div的性质还不一样，div包裹的比较好，就不会掉下来
如果在P里包裹div 小心浏览器差异
（最好不要这么做！！！）
这里写图片描述
实际一定要多做测试
or(这里是第三个方法了)
父元素上加伪类
.clearfix:after{
content:”“;
visibility:hidden;
display:block;
height:0;
clear:both;
}
对IE要zoom:1;
or
以浮制浮让父元素也飘起来

关于ie6一下（ie7也有问题）有很多很多bug 希望老板不要求IE。。。
如果要求了，看这个
替代定位方法：position: relative, left: 100% and a negative margin-left.
非常奇技淫巧的组合。。。(详细的看这里)[https://alistapart.com/article/fauxabsolutepositioning]

2
display

很多实验性质的，主要block inline
inline-block对其后有影响，之前没有影响（废话）
inline会消除div的已设定的宽和高
如果父元素inline而子元素为块级元素，则相当于他俩同级，不过一前一后而已
如果元素float 则原本inline又变成块级，有宽和高
不管float在前还是display:inline在前都会表现出float特性
flex 会让内容尽量表现得好看
gird是candidate recommendation 暂时不太支持
table 暂时没懂跟block有啥区别。。。。回头再查不然问梅
inline-flex inline-block ==两者的组合

//实现分栏布局，并不好用啊。。。而且外层是block没变化,table究竟有何意义？？？
    <style>
    #main { 
display: block; 
border-collapse: collapse; 
} 
#nav { 
display: table-cell; 
width: 180px; 
background-color: #e7dbcd; 
} 
#extras { 
display: table-cell; 
width: 180px; 
padding-left: 10px; 
border-right: 1px dotted #d7ad7b; 
} 
#content { 
display: table-cell; 
width: 380px; 
padding-left: 10px; 
} 
</style>

<body>
<div id="main"> 
<div id="nav">? navigation column content…</div> 
<div id="extras">? news headlines column content…</div> 
<div id="content">? main article content…</div> 
</div>

table-cell可以这么用：

    <style>
    div{
        display: table-cell;
        border: 1px solid #beceeb;
        vertical-align: middle;
        width: 400px;
        height: 600px;
    }
    span{
        display: inline-block;
    }
    </style>

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

/* display-outside> values */
display: block;
display: inline;
display: run-in;

/* display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* display-outside> plus values */
display: block flow;
display: inline table;
display: flex run-in;

/* display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* display-box> values */
display: contents;
display: none;

/* display-legacy> values */
display: inline-block;
display: inline-list-item;
display: inline-table;
display: inline-flex;
display: inline-grid;

3.
font-size
(em,px,pt,%)[http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/]
这个看过无懈可击的web设计，了解的还比较多，回去可以翻翻笔记。。。。

Windows默认96DPI（PPI，微软都将DPI和PPI混为一体，我们也就无须较真了）。这样的定义，说明了：1px＝1/96英寸。联系pt的概念，1pt＝1/72英寸，可以得出，在这样的设置中，1px＝0.75pt

em vs %
em vs %

4
position
过了一遍w3c，再要看看与float、display结合是怎么回事

看了这个对CSS中的Position、Float属性的一些深入探讨
相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只是视觉上发生的偏移。对之后的同级元素没影响
position: relative并没有改变行内元素的Display属性（还是Inline），这个概念非常重要（注意与接下来的absolute的区别）
如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。（试验了一下fixed也可以只要不是static 为什么都只提到这俩 w3c的一个映射页面还专门说fixed不行）应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！

1）块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（会受到父元素的宽度影响）。

2）元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。

应用了position: relative/absolute的元素，margin属性仍然有效
position: absolute忽略根元素的padding。
行内元素在应用了position：absolute之后会display:block。

5
vh vw view-width

6
selector
> child
whitespace descendant
+ imediate sibiling
~ general sibilings

[attribute~=value] 空格分割的字符中包含该value
[attribute|=value] -分割的字符中开头！！有该value

先按优先级加格式，然后按出现顺序，后者覆盖前者
！important （Ie7.0和firefox）
>
style=”“行内（我的理解更接近于“强制”的覆盖）
> Id
> 类，伪类，属性选择[atrr=value]
>元素伪元素

7
伪类伪元素

伪类
这里写图片描述

<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body>`

伪元素
::after
::before
::first-letter
::first-line
::selection 用户选择文本（document！）后，选中的片段呈现不同的颜色、背景等等
是创建一个行内子元素。常通过 content 属性来为一个元素添加修饰性的内容。
:: 是CSS3，为了区别伪元素和伪类

加一点，相对路径的东西：
　“.”–代表目前所在的目录。可以省略”./”
　　“../”–代表上一层目录。
　　“/”–代表根目录。
　这里写图片描述
　Ref2.htm 引用BeRef1.gif
　 ../../Dir1/SubDir2/ BeRef1.gif /Dir1/SubDir2/ BeRef1.gif
　
Ref1.htm引用 BeRef2.htm
../../Dir2/ BeRef2.htm /Dir2/BeRef2.htm

add another
white-space属性
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。 

nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。 

pre-wrap    保留空白符序列，但是正常地进行换行。 

pre-line    合并空白符序列，但是保留换行符。

十方魔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录