CSS
关注
分享
扫一扫
css汇总
吃喝玩乐秀起来
穷不过三代.
展开
-
CSS之background属性
属性解释background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：background-color 设置背景颜色background-image 设置背景图片地址background-repeat 设置背景图片如何重复平铺background-position 设置背景图片的位置background-attachment 设置背景图片是固定还是随着页面滚动条滚动相关代码：<原创 2021-04-16 17:45:38 · 157 阅读 · 0 评论 -
CSS之定位详解
文档流文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。关于定位我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父原创 2021-02-03 15:23:22 · 317 阅读 · 0 评论 -
css之浮动详解
浮动浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来3、相邻浮动的块元素可以并在一行，超出父级宽度就换行4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除原创 2021-02-01 17:08:50 · 2836 阅读 · 0 评论 -
CSS之块元素、内联元素、内联块元素
元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。块元素块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：支持全部的样式如果没有设置宽度，默认的宽度为父级宽度100%盒子占据一行、即使设置了宽度内联元素内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：支持部分样式（不支持原创 2021-02-01 14:50:14 · 214 阅读 · 0 评论 -
css之解决元素溢出问题
css元素溢出当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。overflow的设置项：1、visible 默认值。内容不会被修剪，会呈现在元素框之外。2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。5、inherit 规原创 2021-01-28 11:39:44 · 5510 阅读 · 0 评论 -
css之margin使用技巧：元素水平居中，边框合并，top塌陷
盒模型使用技巧及相关问题margin相关技巧1、设置元素水平居中： margin:x auto;2、margin负值让元素位移及边框合并代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width:200px;原创 2021-01-28 11:35:45 · 957 阅读 · 0 评论 -
CSS之盒子模型
CSS盒子模型盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置边框设置一边的边框，比如顶部边框，可以按如下设置：border-top-color:red; /* 设置顶部边框颜色为红色原创 2021-01-26 16:11:01 · 112 阅读 · 0 评论 -
CSS之选择器
css选择器常用的选择器有如下几种：1、标签选择器标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。2、id选择器通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。3、类选择器通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。举例：<!DOCTYPE html><html lang="e原创 2021-01-21 09:48:54 · 196 阅读 · 0 评论 -
css之颜色表示法
css颜色表示法css颜色值主要有三种表示方法：1、颜色名表示，比如：red 红色，gold 金色2、rgb表示，比如：rgb(255,0,0)表示红色3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <原创 2021-01-20 17:01:00 · 604 阅读 · 0 评论 -
CSS之文本样式详解
常用的应用文本的css样式：color 设置文字的颜色，如： color:red;font-size 设置文字的大小，如：font-size:12px;font-family 设置文字的字体，如：font-family:‘微软雅黑’;font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:n原创 2021-01-20 12:30:25 · 323 阅读 · 0 评论 -
CSS之基本语法和页面引用
css基本语法及页面引用css基本语法css的定义方法是：选择器 { 属性:值; 属性:值; 属性:值;}选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。css注释的快捷方式/*css注释 ctrl+"/"*/css页面引入方法：1、外联式：通过link标签，链接到外部样式表到页面中。link rel=“stylesheet” type=“text/css” href=“css/main.css”>先创建个css目录然后引入的方式是：原创 2021-01-19 15:14:20 · 170 阅读 · 0 评论