CSS
文章平均质量分 67
今天会下雨吗
多动脑思考吧
展开
-
CSS的transform-origin 属性
定义和语法语法transform-origin: x-axis y-axis z-axis;默认值transform-origin:50% 50% 0;单位transform-origin属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。属性值详解没有旋转的时候下面例子都旋转45°,transform: rotate(45deg);默认位置是以元素中心为基点transform-origin: 50% 5原创 2021-11-30 14:56:01 · 844 阅读 · 0 评论 -
BFC布局
1. 概念BFC 即 Block Formatting Contexts (块级格式化上下文)BFC其实就是一个独立的渲染区域(容器),规定了区域内部元素的布局方式,并且区域内元素的布局不会影响到外面的元素。2. 触发BFC的条件body根元素浮动元素:float除了none以外的值绝对定位元素:position(absolute、fixed)display为inline-block、table-cells、flexoverflow除了visible以外的值(hidden、auto、s原创 2021-10-04 21:21:28 · 217 阅读 · 0 评论 -
css面试题
1. 写代码:css div 垂直水平居中,并完成 div 高度永远是宽度的一半(宽度可以不指定)css实现水平居中的几种方式给div自己添加margin:0 auto;给div的父元素添加:display: flex;justify-content: center;给div自己添加:position: relative;top: 0;left: 25%;/* left计算方式:div的宽度 / div父元素的宽度 * 1/2 */css原创 2021-10-04 20:33:12 · 121 阅读 · 0 评论 -
css3新增属性box-sizing详解
1. 定义详解box-sizing属性是用来规定容器元素的总宽高是如何计算的W3C标准盒模型中规定:元素总宽度 = contentWidth + padding +border元素总高度 = contentHeight + padding + bordermargin不计入元素的宽高,他设置的是一个元素与其他元素之间的间隔,不会改变元素本身的宽高例如,要设置一个总宽度为350px的盒子div { width: 320px; padding: 10px;原创 2021-09-29 16:11:21 · 932 阅读 · 0 评论 -
给子元素添加margin-top,作用到父元素上的问题
在css盒模型中规定,两个或多个毗邻的普通流中的块级盒子,在垂直方向上的外边距会发生叠加,这种形成的外边距称之为外边距叠加(margin折叠)。最终的margin值计算方法如下:全部都为正值,取最大者;不全是正值,则都取绝对值,然后用正值减去最大值;没有正值,则都取绝对值,然后用0减去最大值。毗邻的定义:同级或者嵌套的盒元素,并且他们之间没有padding,border,非空内容分隔。当父元素的第一个子元素的margin-top,如果碰不到有效的padding,border和内容就.原创 2021-09-27 20:22:17 · 105 阅读 · 0 评论 -
position四个属性详解
1. position:static;这个属性让元素使用正常的布局(元素在文档常规流中当前的布局位置)。也就是说元素没加这个属性和加了以后位置都是不变的只是此时 top, right, bottom, left 和 z-index属性无效。2. position:relative;:相对定位在元素原有的位置基础上,根据设置的top,left调整元素位置不会改变页面布局,不影响其他元素的偏移,因此会在此元素未添加定位时所在位置留下空白position:relative 对 table-*-原创 2021-06-01 21:39:23 · 17888 阅读 · 5 评论 -
display: none、visibility:hidden和opacity: 0的区别
1. display: none设置该属性后,该元素和它所有的后代元素都会被隐藏。无法使用屏幕阅读器等辅助设备访问占据的空间消失<div> <p>A没有设置display:none</p> <p style="display: none;">B设置display:none</p> <p>C没有设置display:none</p></div>效果图2. vi原创 2021-05-31 21:39:44 · 1237 阅读 · 0 评论 -
csss实现三角形(倒三角、左右侧边倒三角等)
通过下面这张图你就知道三角是怎么做的了,做法如下:<style> .box{ width: 0px; height: 0px; border-left: 30px solid pink; border-right: 30px solid red; border-top: 30px solid green; border-bottom: 30px solid black;原创 2021-04-27 20:16:12 · 595 阅读 · 0 评论 -
HTML/css常用技巧
1.实现文本居中<1>line-height:设置文字垂直居中;如果想要盒子中的文字垂直居中,只要将文字的行高设置为和盒子高度一致即可;<2>text-align:center; :设置文字水平居中;...原创 2020-10-23 17:39:24 · 226 阅读 · 0 评论 -
position定位的使用-实现居中、装饰点、图片的定位
1. 图片的定位 效果(将“vip”和“更新至30集”固定在想要的位置,如果直接用ps把图片设定好会比较麻烦,任务多了工作量大)代码css<style> *{margin: 0px;padding: 0px;} li{list-style: none;} a{text-decoration: none; color: #000;} /*text-decoration: none -> 去掉a标签的下划线 */原创 2020-05-10 23:41:01 · 255 阅读 · 0 评论 -
鼠标划过出现下拉菜单
效果图,鼠标点击“卖家中心出现下拉菜单” 代码css*{margin: 0px;padding: 0px;}li{list-style: none;}a{text-decoration: none; color: #000;} /*text-decoration: none -> 去掉a标签的下划线*/#menu{width: 100px; height: 30px; margin: 20px auto; border: 1px black ..原创 2020-05-10 17:51:48 · 941 阅读 · 0 评论 -
flex弹性布局练习
01.骰子的点数 flex弹性布局适合在一维布局运用,多维适合用网格布局 示例: 代码css#box1,#box2,#box3,#box4,#box5,#box6{float: left;}#box1{width: 100px; height: 100px; border: 1px solid black; border-radius: 5px; display: flex; j...原创 2020-05-07 11:30:16 · 774 阅读 · 0 评论 -
flex弹性布局知识点详解
flex-direction flex-direction用来控制子项整体布局方向,是从左往右还从右往左,是从上往下还是从下往上取值含义row默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右row-reverse显示为行。但方向和row属性值方向相反column显示为列column-reverse显示为列。但方向和column属...原创 2020-05-07 08:58:47 · 239 阅读 · 0 评论 -
关于ul右浮动排列内容倒序的问题
当我们要实现ul标签在右上角横向排列时,往往会采取给<ul>、<li>添加有浮动的方法,这样会出现<li>内容出现的顺序跟我们写的不一样的情况,例如:我们写的是这样的:<div id="headerTop"> <header class = "main"> <div class="logo l">...原创 2020-05-06 17:33:56 · 1773 阅读 · 0 评论 -
使用text-align: center;的居中问题
问题:把<img>和<span>放在div标签里用text-align:center;进行div块内元素居中但是文本居中了,图片没有居中 解决方法我们先来说一下 w3cschool对text-align定义:text-align 属性规定元素中的文本的水平对齐方式。通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。其次我们要知道text-align...原创 2020-03-24 22:10:49 · 8136 阅读 · 0 评论 -
CSS基础
1.CSS基础语法(1)格式:选择器{属性1:值1;属性2:值2}(2)单位:px -> 像素(pixel)、% -> 百分比(3)基本样式:a. width、height、background-colorb. 长度单位:1.px -> 像素2.% ->百分比外容器 -> 600px...原创 2020-02-21 22:39:55 · 271 阅读 · 0 评论