css 知识点

野性酷女 2024-02-18 18:35 70阅读 0赞

一、 选择器：

p:first-letter\{ /\*伪元素\*/

font-size: 50px

div:first-line\{

background-color:red;

input:checked\{ /\*伪类选择器\*/

width: 200px;

height: 200px;

input:disabled\{

background-color:red;

样式优先级：行内 > id> class

**字体样式：**

p\{

font-family:楷体;

font-stretch:extra-condensed;

font-style:italic;

color:\#ffff00;

font-size:50px;

font-weight:bold;

i\{

font-style:normal;

**背景设置**

\#box \{

/\* background-color:pink;\*/

background-image:url(../image/1.jpg);

background-repeat:no-repeat;

background-position:right top;

background-attachment:fixed;

width:1024px;

**画三角形：**

\#demo1\{

width:0px;

height:0px;

border:200px solid;

border-left-color:white;

border-right-color:white;

border-top-color:white;

border-bottom-color:yellow;

**画奥运五环标志**

要求：居于页面正中显示

<divclass="plat">

<divclass="circle1"></div>

<divclass="circle2"></div>

<divclass="circle3"></div>

<divclass="circle4"></div>

<divclass="circle5"></div>

</div>

Css样式：

\*\{

margin:0px;

padding:0px;

.plat\{

position:absolute;

width:380px;

height:190px;

top:50%;

left:50%;

margin-left:-190px;

margin-top:-95px;

.circle1,

.circle2,

.circle3,

.circle4,

.circle5\{

position:absolute;

width:100px;

height:100px;

border-radius:50%;

border:10pxsolid black;

.circle1\{

border-color:red;

left:0px;

top:0px;

.circle2\{

border-color:green;

left:130px;

top:0px;

z-index:3;

.circle3\{

border-color:blue;

left:260px;

top:0px;

.circle4\{

border-color:yellow;

left:65px;

top: 70px;

.circle5\{

border-color:purple;

left:195px;

top:70px;

![20180308212945704][]

**两栏布局：**

<divclass="right"></div>

<divclass="left"></div>

Css样式：

\*\{

margin:0px;

padding:0px;

.right\{

position:absolute;

right:0px;

width:100px;

height:100px;

background-color:pink;

opacity:0.5;

.left\{

height:100px;

background-color:black;

margin-right:100px;

**经典bug：margin塌陷问题**

<divclass="box">

<divclass="content"></div>

</div>

Css样式：

.box\{

margin-top:100px;

margin-left:100px;

height:100px;

width:100px;

background-color:black;

/\* overflow:hidden;\*/

/\* display: inline-block;\*/

/\* position: absolute;\*/ 触发bfc，解决塌陷问题

float: left;

.content\{

margin-top:50px;

margin-left:50px;

height:50px;

width:50px;

background-color:green;

**Float:**

所有设置了float的元素都会产生浮动流，块级元素看不到它们，触发了bfc的元素、文本元素及文本可以看到。

**清除浮动流：**

1）添加元素：如<p class="p"></p>，并设置：.p\{

clear:both; /\*清除浮动流\*/

<divclass="content"></div>

<pclass="p"></p>

</div>

这种方式改变原html内容，不推荐使用

2）设置父元素的伪元素选择器：

/\*伪元素选择器\*/

.plat:after\{

content:"";

display:block;

clear: both; /\*清除浮动流，三行代码都不能少\*/

另外可以将父元素的属性触发bfc也可清除

**设置文字环绕图片：**

<img src="image/1.jpg" alt="这是图片" class="img1"> 为祖国守岁，为和平出征。深冬，清晨的南海某军用码头一派忙碌景象：

.img1\{

float: left;

width:200px;

margin-right:10px;

**制作![20180308213022623][]，并清除浮动流**

<ulclass="u">

<liclass="l">

<ahref="\#">天猫</a>

</li>

<liclass="l">

<ahref="\#">聚划算</a>

</li>

<liclass="l">

<ahref="\#">天猫超市</a>

</li>

</ul>

Css样式：

\*\{

margin:0px;

padding:0px;

.u\{

list-style:none;

.u:after\{

content:"";

display:block;

clear:both;

.u .l\{

float:left;

line-height:30px;

margin:0px10px;

a\{

text-decoration:none;

a:hover\{

background-color:\#f33;

border-radius:20%;

**两种文本溢出**，单行文本、多行文本溢出，多行文本难以实现，采取估计长度，手动打点。

1）单行文本

**溢出容器，打点展示**

.box\{

display:inline-block;

line-height:30px;

height:30px;

width:500px;

overflow:hidden;

white-space: nowrap;

text-overflow:ellipsis;

**背景图片处理：**当css样式未正常加载时，需要显示原生内容；当正常加载时，需要隐藏原生内容：

<a href="www.baidu.com">www.baidu.com</a>

Css样式：

/\*

方式一

a\{

border:1px solid red;

display:inline-block;

height:200px;

width:200px;

background-image:url(../image/1.jpg);

background-size:200px 200px;

text-indent:200px;

white-space:nowrap;

overflow:hidden;

\}\*/

/\*方式二

通过padding-top=容器高度 从而撑起图片，将文本内容挤出容器，隐藏即可\*/

a\{

border:1px solid red;

display:inline-block;

height:0px;

padding-top:200px;

overflow:hidden;

width:200px;

background-image:url(../image/1.jpg);

background-size:200px 200px;

**设置布局 ![20180308213120463][]**

\*\{

margin:0px;

padding:0px;

div\{

width:300px;

height:30px;

background-color:\#3D9;

/\* font-size:20px; 居中方式一 \*/

line-height:30px;

font-size:30px;

color:\#fff;

padding:10px0px;

div:before\{

content:"";

height:20px;

width:40px;

display:inline-block;

background-image:url(https://www.baidu.com/img/bd\_logo1.png);

background-size:100% 100%;

margin-right:10px;

div::after\{

content:"";

height:20px;

width:20px;

display:inline-block;

background-image:url(https://ss0.bdstatic.com/5aV1bjqh\_Q23odCf/static/superman/img/topnav/zhidao.png?v=md5);

background-size:100% 100%;

float:right;

margin-right: 20px;

**阿里笔试题：**

![2018030821304449][]

Html:

<divclass="wrapper">

<imgsrc="image/2.jpg" alt="这是图片">

<pclass="content1">

\{最多两行 20px \#333 ,顶部对齐图片，底部间距8px\}

</p>

<pclass="content2">

\{12px\#666 行高1.2 使用语义化的html标签完成以下布局，考虑模块化和扩展性。容器默认宽度320px。图片100\*100,hover时，容器宽度变成400px;\}

</p>

</div>

Css样式：

\*\{

margin:0px;

padding:0px;

.wrapper\{

width:320px;

.wrapper img\{

width:100px;

height:100px;

float:left;

.wrapper:hover\{

width:400px;

.wrapper .content1\{

line-height: 20px;

height: 40px;

font-size: 20px;

color: \#333;

overflow: hidden;

margin-bottom: 8px;

.wrapper .content2\{

color:\#666;

font-size:12px;

line-height:1.2em;

[20180308212945704]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d6d2ed861fc84e629a7b0eddbe291d1e.png
[20180308213022623]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/107d6c010b9d44a8b04b4f13745199d8.png
[20180308213120463]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/34cd852fabc549c5887f95c59d227b57.png
[2018030821304449]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b1ee7a4500874173b38a9fd7475beb98.png