前端学习之路css(04)-基础知识

CSS 分组与嵌套

分组选择器

在样式中,我们可能有很多元素拥有同样的样式,我们可以使用分组选择器将它们一次性定义出来。每个选择器用逗号分隔。

这里写图片描述

这里写图片描述

嵌套选择器

它适用于选择器内部的选择器样式。

这里写图片描述

这里写图片描述


CSS Dimension (尺寸)

CSS中允许我们控制元素的宽高,属性大致包括以下;

  • height,元素的高度;
  • line-height,行高;
  • max-height,最大高度;
  • min-height,最下高度;
  • width,宽度;
  • max-width,最大宽度;
  • min-width,最小宽度;

这里写图片描述

这里写图片描述


CSS Display (显示)

此属性就是控制元素是否显示的。隐藏元素有两种表示方式;
visibility:hidden,元素隐藏了但是仍然占用空间;
display:none,元素隐藏了且不占用空间;

display属性还有两个值;
display:inline,将元素显示为内联元素,即不换行;
display:block,将元素显示为块元素,换行;

这里写图片描述

这里写图片描述


CSS Positioning(定位)

定位就是以什么为参照物的问题,比如相对布局以某个已知的元素为参照物,或者绝对布局等等,参照物的不同决定了元素位置的不同。它有四种定位方式:static、relative、fixed、absolute。如position:static;

static
html的默认值,即没有定位,元素出现在正常的流中,静态定位不会收到top、left、bottom、right等的影响;

relative
元素相对于浏览器窗口位置的定位,即使窗口是滚动的它也不可移动。

fixed
是相对其正常位置的定位。

absolute
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

overflow
属性规定当内容溢出元素框时发生的事情。
overflow:scroll; 表明多出的空间可滑动查看;
overflow:hidden; 表明隐藏多出的控件部分;

实例参考


CSS Float(浮动)

具体参见


CSS Align(对齐)

文本对齐请参照
另外我们可以通过margin、position、float设置块对齐


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值