200px

首页 > TAG信息列表 > 200px

CSS基础(二)

溢出(overflow) - 值解析 - visible: 溢出的值会在容器之外显示(默认) - hidden: 溢出的值会被隐藏 - scroll: 溢出的内容会被提供滚动条,方便用户显示 - auto: 有溢出就提供滚动条,没有就不提供滚动条 - inherit: 继承父容器的overflow属性 - overflow-

div 组件中的中心元素

div 组件中的中心元素在 div 容器中将元素居中有时会很棘手。当你制作网页的前端时，知道究竟是什么而不是每次都尝试它是非常重要的。如何使用 CSS 使 div 居中？现在，将元素居中不仅仅意味着 div 组件的居中。通过居中，我将专注于水平居中垂直居中水平和垂直居中（组件的中心）

2022-08-23 day33 第一小组王鸣赫

目录CSS三大特性1、层叠性2、继承性3、优先级常用单位字体背景列表属性盒子模型display的inline、block、inline-block的区别文档流定位定位的left和top、right和bottom和margin-left.....的区别浮动可见性动画transition和animation区别作业 CSS三大特性 1、层叠性一个标签可以

如何将一个div水平垂直居中？6种方法做推荐

https://www.cnblogs.com/Julia-Yuan/p/6648816.html 方案一： div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，兼容性：,IE7及之前版本不支持　　　　div{ width: 200px; height: 200px; background: green; p

css div的水平、垂直同时居中

创建页面布局的时候，会遇到只是用纯粹的css控制div的垂直和水平居中。有很多种方法可以实现这种效果，这里列出我喜欢的。首先是最基本的， css控制div水平居中创建一个div的水平居中很简单，只需要设定宽度和左右margin值自动。这种方法可以用在block级元素上（div、图片、h1等）。如果在in

响应式布局简单知识

响应式布局 1、rem基础 rem单位：是一个相对单位，类似于em，em相对于父元素的字体大小来说的； rem的基准是相对于 Html 元素的字体大小优点：可以通过修改html中的大小来控制整个页面字体的大小 2、媒体查询规则媒体查询一般按照从大到小或从小到大的顺序来 @media screen and (max-wi

009-标签属性

字体属性（1）颜色设置：通过十六进制：color:#00000ff; 通过RGB：color:rgb(0,0,255); color:rgba(0,0,255,1); 其中a表示透明度，a取值0~1，1表示完全不透明；0表示完全透明。（2）大小设置：font-size,chrome可接受最小的为12px。（3）加粗设置，font-weight。font-weight:lighter;最常用的是设置100-40

18 边框阴影动画

当鼠标穿过展示动画效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框阴影</title> <style type="text/css"> .shadow{ margin: 50px auto; position: relative; width: 200px; heigh

21 水平垂直居中

1 行内元素水平垂直居中方式一： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行内元素水平垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red;

14 CSS定位

1 相对定位 position: relative 相对定位：相对于自己原来的位置定位现象和使用： 1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。 2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right 用途： 1.微调元素位置 2.做绝对定位的参考（父相子绝）绝对

13 float属性（重点）

浮动的背景开始为了web工程师，在网页上实现一些简单的布局。如文字环绕图片现象浮动的属性 none：表示不浮动，默认值 left：左浮动 right：右浮动 inherit：继承父元素的浮动属性 1 文件环绕效果文字环绕图片，可设置图片的浮动。 <!DOCTYPE html> <html> <head> <meta charset="

Grid布局（HTML）

在学习CSS的时候，遇到了一个问题就是，没有看懂Grid布局，所以，这篇文章是用来详细描述Grid布局的。一、Grid布局的定义 Grid布局将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。二、示例首先我先写了九个div，body代码如下： <div id="main">

flex常用固定搭配

flex简写：flex-grow（项目放大），flex-shrink （项目缩小），flex-basis（项目本身） flex: 1; 全写：flex: 1 1 0%;内容自动放大或缩小占满剩余空间。 1、子元素都设置flex: 1; 子元素盒子会平分并占满父盒子； 2、一个元素宽度（或高度）固定，另一个元素宽度（或高度）自适应。 .parent { display: flex;}.son

DOM：滚动时固定导航栏

简单实现滚动时固定导航栏实例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

【html+css】总结七种垂直水平居中的办法

第一种：定位+cala（固定宽高） html部分： <div class="box1"> <div class="inner"></div> </div> css部分： .box1{ width: 200px; height: 200px; border: 1px solid black; position: relative; } .box1 .inner { width

flex布局justify-content使用between或者around,最后一行左对齐

问题：在使用flex布局，justify-content：space-between/space-around 最后一行的子元素，经常不是我们想要的。我们希望最后一行是左对齐。解决办法：办法1：使用grid布局 .wrap { 　　　　width: 100%; 　　　　border: 1px solid royalblue; 　　　　display: grid; 　　　　grid-gap:

高阶切图技巧！基于单张图片的任意颜色转换

今天，要介绍一种基于 CSS mask-composite 的高级技巧。通过掌握它，我们可以通过一张图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。通过单张 PNG/SVG 得到它的反向切图事情的经过是这样的，某天，我们拿到了这样一张 PNG/SVG 图片：就这张图片而言，它是一张 PNG 图，灰色部分

跳动的心脏

《打火机与公主裙》-跳动的心脏女主真是一个大神仙，看着C语言的书（水仙花数……），学习怎么用前端语言做出特效，这是内置了一个代码转换器吗？注：主要涉及绘制心脏、虚线格背景等问题音乐嵌入一直都是一个难以解决的问题，想要添加自动播放、循环且隐藏不可见的背景音如果可以加一些心跳

水平垂直居中的四种方式

html 布局结构如下 <div class="outerBox"> <div class="innerBox"></div> </div> 第一种使用flex .outerBox { height: 400px; background-color: rgb(12, 243, 232); display: flex; justify-content: center;

05.行高

height:200px; 文字在上面 height:200px; line-height：200px; 此时单行文字在div里居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

02.绝对定位

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

08.clearfix

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

前端实现动画效果的几种方式 - 九种

原文链接： https://www.cnblogs.com/yalong/p/16385198.html 一. Js实现代码如下 <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #rect { width: 200px; height: 200px; background: gray;

12.轮廓，阴影和圆角

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

常见数值长度单位

常见数值单位: ①px (pixel) 像素px是相对于显示器分辨率 ②em: 相当于当前对象内的font-size，如未设置，则相当于浏览器的默认字体尺寸 em的值并不是固定的，它会继承父级元素的字体大小。 ③rem: 相当于根元素(html)的字体大小的单位，根据htm l设定的font-size来换算 ④vh(viewpor