CSS练习

1.选择器

1.标签选择器

标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
}

2.类选择器

多类名

<p class="class-name1 class-name2"></p>

3.id选择器

4.复合选择器

  • 后代选择器
元素1 元素2 { 样式声明; }
  • 子选择器

子元素选择器(子选择器)只能选择作为元素作为元素的最近一级子元素。简单理解就是选亲儿子。

元素1 > 元素2 { 样式声明; }
  • 并集选择器
元素1, 元素2 { 样式声明; }
  • 伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
a:focus 伪类选择器用于获取焦点的表单元素。
:first-child			所有兄弟元素中的第一个
:last-child				所有兄弟元素中的最后一个
ul li:nth-child(n)			所有兄弟元素中的第n个,n是个数字
2n偶数 2n+1奇数 n+5从第五个到最后 -n+5前五个

5.属性选择器

        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        /* 选择首先是section 然后 具有class属性 并且属性值 必须是 icon结尾的这些元素 */
        section[class$=data] {
            color: blue;
        }

2.类命名规则

 3.字体属性

body {
  font-family: "微软雅黑", Arial, Helvetica, sans-serif;
 font-size: 16px;
  font-weight: 700; 加粗
font-style: normal;
text-align: center;
text-decoration: underline;装饰文本
text-indet: 5px; 2em; 两个文字大小,定义段落首行缩进。
line-height: 5px; 行高
}

4.emmit语法

div{内容$}*5 

5.块,行内,行内块

  • 块:h1-h6pdivulolli
  • 行内astrongbemidelsinsuspan 高、宽直接设置是无效的
  • 行内块 imginputtd

元素模式转换

行内->块级

a {
  display: block;
}Copy to clipboardErrorCopied

块级->行内

div {
  display: inline;
}Copy to clipboardErrorCopied

行内/块级-> 行内块元素

span {
  display: inline-block;
}

6.背景

background-color: 颜色值;
background-image: url(图片url);
background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y;
background-position: x y;
参数 x 和 y 指 x 左边和 y 坐标或者top / center / bottom / left / center / right 方位名词
background-attachment: scroll | fixed; 背景图片固定

background: rgba(0, 0, 0, 0.3);设置透明度

7.盒子模型

1.边框

属性作用
border-width定义边框粗细,单位 px
border-style边框样式
border-color边框颜色
/*习惯顺序*/
border: 5px solid pink;
/*注意层叠性*/
border-top: 1px solid red;

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse: collapse;

 2.内边距

box-sizing: border-box 盒子大小为 width

不会撑大盒子,在最后写

 /* padding: 5px; */
 /* padding: 5px 10px; */
 /* padding: 5px 10px 20px; */
 padding: 5px 10px 20px 30px;

1 个值:上下左右
2 个值:上下,左右
3 个值:上,左右,下
4 个值:上,右,下,左,顺时针

3.外边距

margin 属性用于设置外边距,即控制盒子与盒子之间的距离。

  • margin-left: 左外边距
  • margin-right: 右外边距
  • margin-top: 上外边距
  • margin-bottotm: 下外边距

margin 简写方式与 padding 一致。

margin: 100px auto;

外边距塌陷 
  1. 为父元素添加 overflow:hidden

4.圆角边框

border-radius: length;

 可以用百分比,50%是圆形

接四个值,左上,右上,右下,左下

5.盒子阴影 

bxo-shadow: h-shadow v-shadow blur spread color inset;
描述
h-shadow必需,水平阴影的位置,允许负值
v-shadow必需,垂直阴影的位置,允许负值
blur可选,模糊距离
spread可选,阴影的尺寸
color可选,阴影的颜色
inset可选,将外部阴影改为内部阴影(默认是外部阴影)

8.浮动 

float: right;

浮动的盒子不再保存原有位置,浮动的元素具有行内块元素特点

1.清除浮动

1.额外标签法(不常用)

        .clear {
            clear: both;
        }
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>

2.在父盒子加overflow: hidden;

3.为父盒子增加类属性

.clearfix {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /*IE6、7专有*/
  *zoom: 1;
}

4.为父元素增加类名

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

 9.CSS书写顺序

10.定位

定位后,行内元素也可以设置宽高

1.相对定位(占位置)

相对于自己定位

选择器 {
  position: relative;
}

2.绝对定位(不占位置)

选择器 {
  position: absolute;
top: ;
right: ;
}

相对于自己爹定位 

3.固定定位

选择器 {
  position: absolute;
}

4.定位次序,都是绝对定位,数值越大越上

选择器 {
  z-index: 1;
}
  • overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么。

overflow:hidden

属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll不管超出内容否,总是显示滚动条
auto超出自动显示滚动条,不超出不显示滚动条

 CSS高级

1.精灵图

将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。background-position 属性来定位

左移图片和下移图片都是负值

2.vertical-align 属性应用

vertical-align : baseline | top | middle | bottom 

bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。

主要解决方法有两种:

1.给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)

2.把图片转换为块级元素 display: block;

3.Flex布局

display:flex

1.原理

就是通过给父盒子添加flex属性,来控制子盒
子的位置和排列方式


2.给父亲添加的css属性

 flex-direction:设置主轴的方向 row column
 justify-content:设置主轴上的子元素排列方式


 flex-wrap:设置子元素是否换行


 align-content:设置侧轴上的子元素的排列方式(多行)


 align-items:设置侧轴上的子元素排列方式(单行)


 flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap

 flex-flow:row wrap;

2.子属性

  flex 子项目占的份数


 align-self 控制子项自己在侧轴的排列方式
 order属性定义子项的排列顺序(前后顺序)

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java狂魔哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值