随笔分类 - 前端 / CSS
摘要：1.父容器设置为flex布局，并允许折行 .flex-outer { display: flex; flex-wrap: wrap; } 2.通过修改子容器百分比实现 是n列就把百分比变为100/n（%）
阅读全文
摘要：1.使用flex布局 <style> #back{ border: red solid 1px; width: 800px; height: 500px; display: flex; align-items: center; } #left{ border: blue 1px solid; wid
阅读全文
摘要：https://www.cnblogs.com/hellocd/p/10443237.html
阅读全文
摘要：1.在父元素使用 display: flex; justify-content: center; align-items: center 其中justify-content是左右居中，align-items是上下居中
阅读全文
摘要：1.在子元素使用display:inline-block 注意子元素宽度加上边距不能超过父元素宽度，否则就在下一行展示 <style> #back{ border: red solid 1px; width: 800px; height: 500px; } #back div{ border: bl
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css_form_tables.css"/> </head> <body
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Ic
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css_font.css"/> </head> <body> <div
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css_font.css"/> </head> <body> <h1>这
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css_outline.css"/> </head> <body> <!
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css_margin.css"/> </head> <body> <p
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css_border.css"/> </head> <body> <di
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css_back.css"/> </head> <body> <div
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 外部css --> <!-- rel 规定当前文档与被链接文档之间的关系 stylesheet 文档的外部样式表。 type 属性 规定被链接文档的 M
阅读全文
