CSS-day1

最新推荐文章于 2021-08-30 11:50:24 发布

Lwangqi

最新推荐文章于 2021-08-30 11:50:24 发布

阅读量206

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42527428/article/details/101108133

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

day1

[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

效果简图如下：

1、圣杯布局

注意middle写在前面就行了，dom结构如下：

DOM:
<body>
<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>

相对应的CSS内容如下：

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
</style>

2、双飞翼布局

DOM代码如下：

<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

双飞翼布局是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。

CSS代码如下：

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>

[css] CSS3有哪些新增的特性？

1.CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2. @Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face { 
 font-family: BorderWeb; 
 src:url(BORDERW0.eot); 
 } 
 @font-face { 
 font-family: Runic; 
 src:url(RUNICMT0.eot); 
 } 
 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

淘宝网字体使用

 @font-face {
                font-family: iconfont;
                src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);              
 }

3. 圆角

border-radius: 15px;

4. 多列布局（multi-column layout）

<div class="mul-col">
    <div>
        <h3>新手上路</h3>
        <p>新手专区 消费警示 交易安全 24小时在线帮助 免费开店</p>
    </div>
    <div>
        <h3>付款方式</h3>
        <p>快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款</p>
    </div>
    <div>
        <h3>淘宝特色</h3>
        <p>手机淘宝 旺信 大众评审 B格指南</p>
    </div>
</div>
.mul-col{
    column-count: 3;
    column-gap: 5px;
    column-rule: 1px solid gray;
    border-radius: 5px;
    border:1px solid gray;
    padding: 10px   ;
}

兼容性不好，还不够成熟。还不能用在实际项目中。

5.阴影（Shadow）

.class1{ 
      text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
 }

OPPO官网的阴影特效 http://www.oppo.com/cn/products.html

6.CSS3 的渐变效果

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。

7.css弹性盒子模型

<div class="boxcontainer">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
.boxcontainer { 
    width: 1000px; 
    display: -webkit-box; 
    display: -moz-box; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
} 
            
 .item { 
    background: #357c96; 
    font-weight: bold; 
    margin: 2px; 
    padding: 20px; 
    color: #fff; 
    font-family: Arial, sans-serif; 
}

效果：

8. CSS3制作特效

1) Transition 对象变换时的过渡效果

transition-property 对象参与过渡的属性
transition-duration 过渡的持续时间
transition-timing-function 过渡的类型
transition-delay 延迟过渡的时间
缩写方式：　　

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分方式：

transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;

示例代码

<style type="text/css">
    .main{
        position: relative;
        margin: 0 auto;
        height:45px;
        width: 300px;
        background-color:lightgray;
        transition:background-color .6s ease-in 0s;
    }
    .main:hover{
        background-color: dimgray;
    }
</style>
<div class="main"></div>

2) Transforms 2D转换效果

主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）

<style type="text/css">
    .main{
        position: relative;
        top:200px;
        margin: 0 auto;
        height:45px;
        width: 300px;
        background-color:dimgray;
        transition:transform .6s ease 0s;
        transform: rotate(0deg);
    }
    .main:hover{
        transform: rotate(180deg);
    }
</style>
 <div class="main"></div>

3) Animation动画特效

<style type="text/css">
    .main{
        position: absolute;
        left: 10px;
        top:200px;
        height:45px;
        width: 300px;
        background-color:cadetblue;
    }
    .main:hover{
        animation: animations 2s ease 0s;
    }
    @keyframes animations {
        0%{
            left: 10px;
            opacity: 1;
        }
        50%,70%{
            left: 50%;
            opacity: .7;
            margin-left:-150px;
        }
        100%{
            left: 100%;
            opacity: 0;
            margin-left:-300px;
        }
    }
</style>
 <div class="main"></div>

原文链接：https://blog.csdn.net/lxcao/article/details/52797914

[css] 在页面上隐藏元素的方法有哪些？

1.display:none，不占据空间，无法点击；

2.visibility:hidden，占据空间，无法点击；

3.height:0; overflow:hidden，不占据空间，无法点击；

4.position:absolute; top:-999em，不占据空间，无法点击；

5.opacity: 0; filter:Alpha(opacity=0)，占据空间，可以点击；

6. position: absolute; visibility: hidden，不占据空间，无法点击。

[css] CSS选择器有哪些？哪些属性可以继承？

选择符类型	例子	例子描述
通用选择器	*
类别选择器(.class)	.intro	选择class=”intro”的所有元素
ID选择器(#id)	#first	选择id=”first”的所有元素
标签选择器(element)	div	选择所有<div>标签
后代选择器(element element)	div p	选择<div>元素内部的所有<p>元素
子选择器(element>element)	div>p	选择父元素为<div>的所有<p>元素
群组选择器(element,element)	div,p	选择所有<div>和<p>元素
相邻同胞选择器(element+element)	div+p	选择紧接在<div>之后的所有<p>元素
伪类选择器(:link :visited :active :hover :focus :first-child)	a:link a:visited a:active a:hover input:focus p:first-child	选择所有未被访问的或所有已被访问的或活动的链接；选择鼠标指针位于其上链接；选择获得的焦点的input 元素；选择属于其父元素的首个子元素的每个 <p> 元素
伪元素选择器(:first-letter :first-line :before :after :lang(language))	p:first-letter p:first-line p:before p:after p:lang(it)	选择每个元素的首字母；选择每个元素的首行；在每个元素的内容之前插入内容；在每个元素的内容之后插入内容；选择带有以 “it” 开头的 lang 属性值的每个元素
属性选择器([attribute] [attribute=value] [attribute~=value] [attribute\|=value] )	[target=_blank] [attribute~=value] [attribute\|=value]	选择包含一个以空格分隔的词为value的所有元素；选择属性的值等于value，或值以 value- 开头的所有元素；用于选取带有以指定值开头的属性值的元素，该值必须是整个单词

CSS3新增选择器如下：

css3新增选择器类型	具体选择器	描述
层次选择器	p~ul	选择前面有p元素的每个ul元素
伪类选择器	:first-of-type :last-of-type :only-of-type :only-child :nth-child(n) :nth-last-of-type(n) :last-child :root :empty :target :enabled :disabled :checked :not(selector)
属性选择器	[attribute*=value] [attribute^=value] [attribute$=value] [attribute~=value]	匹配属性值中包含指定值的每个元素；匹配属性值以指定值开头的每个元素；匹配属性值以指定值结尾的每个元素；用于选取属性值中包含指定词汇的元素

css3新增选择器类型

具体选择器

描述

层次选择器

p~ul

选择前面有p元素的每个ul元素

伪类选择器

:first-of-type

:last-of-type

:only-of-type

:only-child

:nth-child(n)

:nth-last-of-type(n) :last-child

:root

:empty

:target

:enabled

:disabled

:checked :not(selector)

属性选择器

[attribute*=value] [attribute^=value] [attribute$=value]

[attribute~=value]

匹配属性值中包含指定值的每个元素；

匹配属性值以指定值开头的每个元素；

匹配属性值以指定值结尾的每个元素；

用于选取属性值中包含指定词汇的元素

css继承特性主要是指文本方面的继承，盒模型相关的属性基本没有继承特性。

不可继承的：

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承的：

visibility和cursor

终极块级元素可继承的：

text-indent和text-align

内联元素可继承的：

letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

列表元素可继承的：

list-style、list-style-type、list-style-position、list-style-image

[css] CSS3新增伪类有哪些并简要描述

:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符

[css] 用css创建一个三角形，并简述原理

采用的是均分原理

盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部

原理就是一个长度，高度均为0 的盒子，将上、左、右的border颜色设为透明transparent，然后选一个你喜欢的颜色，把下边框设置一下，这样一个三角形就出来了，你还可以通过border-width来改变三角形的大小，代码如下：

#demo{

width:0;

height:0;

border-width:20px;

border-style:solid;

border-color:transparent transparent red transparent;

}

[css] 简述你对BFC规范的理解

概念

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

创建 BFC

根元素或包含根元素的元素

浮动元素 float ＝ left | right 或 inherit（≠ none）

绝对定位元素 position ＝ absolute 或 fixed

display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption

overflow ＝ hidden | auto 或 scroll (≠ visible)

BFC 的特性

BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。

盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。

在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。

BFC 区域不会和 float box 发生重叠。

BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。

BFC 的作用

1.包含浮动元素（清除浮动）

浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，导致无法计算准确的高度，这种问题称为高度塌陷。

解决高度塌陷问题的前提是能够识别并包含浮动元素，也就是清除浮动。

问题举例：如上左图所示，容器（container）没有高度或者 height = auto ,并且其子元素（sibling）是浮动元素，所以该容器的高度是不会被撑开的，即高度塌陷。

解决方法：在容器（container）中创建 BFC。

HTML

<div class="container">

<div class="Sibling"></div>

<div class="Sibling"></div>

</div>

CSS

.container {

overflow: hidden; /* creates block formatting context */

background-color: green;

}

.container .Sibling {

float: left;

margin: 10px;

background-color: lightgreen;

}

特别提示：

通过 overflow:hidden 创建 BFC，固然可以解决高度塌陷的问题，但是大范围应用在布局上肯定不是最合适的，毕竟 overflow:hidden 会造成溢出隐藏的问题，尤其是与 JS 的交互效果会有影响。

我们可以使用 clearfloat 实现清除浮动，这里就不多介绍了，想要了解的可以阅读清除浮动。

2.导致外边距折叠

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的垂直边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。

HTML

<div class="Container">

<p>Sibling 1</p>

<p>Sibling 2</p>

</div>

CSS

.Container {

background-color: red;

overflow: hidden; /* creates a block formatting context */

}

p {

background-color: lightgreen;

margin: 10px 0;

}

如上图所示：红色盒子（Container）中包含两个绿色的兄弟元素（P），并且红色盒子设置 overflow: hidden; 则一个BFC 已经被创建,即导致外边距折叠。

理论上两个兄弟元素之间的边距应该是两个元素的边距之和（20px），但实际是 10px。这就是外边距折叠导致的。

2.1 折叠外边距的值

两个相邻的外边距都是正数时，折叠外边距是两者中较大的值。

两个相邻的外边距都是负数时，折叠外边距是两者中绝对值较大的值。

两个相邻的外边距是 一正一负 时，折叠外边距是两者相加的和。

2.2 外边距折叠的条件是 margin 必须相邻!

3.避免外边距折叠

这一听起来可能有些困惑，因为我们在前面讨论了 BFC 导致外边距折叠的问题。但我们必须记住的是外边距折叠（Margin collapsing）只会发生在属于同一BFC的块级元素之间。如果它们属于不同的 BFC，它们之间的外边距则不会折叠。所以通过创建一个不同的 BFC ，就可以避免外边距折叠。

修改前面的例子并添加第三个兄弟元素，CSS不变。

HTML

<div class="Container">

<p>Sibling 1</p>

<p>Sibling 2</p>

<p>Sibling 3</p>

</div>

结果不会改变，还会折叠外边距，三个兄弟元素（P）将会以垂直距离为 10px 的距离分开。原因是三个兄弟元素都属于同一个 BFC。

创建一个不同的 BFC ，就可以避免外边距折叠。

HTML

<div class="Container">

<p>Sibling 1</p>

<p>Sibling 2</p>

<div class="newBFC">

<p>Sibling 3</p>

</div>

</div>

CSS

.Container {

background-color: red;

overflow: hidden; /* creates a block formatting context */

}

p {

background-color: lightgreen;

margin: 10px 0;

}

.newBFC {

overflow: hidden; /* creates new block formatting context */

}

当第二和第三个兄弟元素属于不同的 BFC 时，它们之间就没有外边距折叠。

浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。

BFC在布局中的应用

要阻止margin重叠，只要将俩个元素别放在一个BFC中即可

使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题

与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式. 特点在于左右俩栏的宽度固定，中间栏可以根据浏览器宽度自适应。

Lwangqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-day1

day1[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙...
复制链接

扫一扫