{"id":17035887,"url":"https://github.com/dabeng/css-basics","last_synced_at":"2026-04-16T14:32:23.888Z","repository":{"id":76025264,"uuid":"195323128","full_name":"dabeng/css-basics","owner":"dabeng","description":null,"archived":false,"fork":false,"pushed_at":"2021-03-16T02:23:46.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-28T02:22:44.787Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dabeng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-05T02:05:50.000Z","updated_at":"2021-03-16T02:23:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"165b3f71-93aa-468d-9e63-348e52b413b5","html_url":"https://github.com/dabeng/css-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2Fcss-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2Fcss-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2Fcss-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2Fcss-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabeng","download_url":"https://codeload.github.com/dabeng/css-basics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245031345,"owners_count":20549913,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T08:48:28.101Z","updated_at":"2026-04-16T14:32:23.882Z","avatar_url":"https://github.com/dabeng.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS\n## Layout\n### 多个块状元素的水平垂直居中\n```css\n#container{\n  display: flex;\n  justify-content: center; /* This defines the alignment along the main axis */\n  align-items: center; /* This defines the alignment along the cross axis */\n }\n```\nequivalent tailwindwcss utility classes\n```html\n\u003cdiv class=\"flex justify-center items-center\"\u003e\n  \u003cdiv\u003e01\u003c/div\u003e\n  \u003cdiv\u003e02\u003c/div\u003e\n  \u003cdiv\u003e03\u003c/div\u003e\n\u003c/div\u003e\n```\n## Selector\n### Priority\n- ID 选择器， 如 #id{}\n- 类选择器， 如 .class{}\n- 属性选择器， 如 a[href=\"segmentfault.com\"]{}\n- 伪类选择器， 如 :hover{}\n- 伪元素选择器， 如 ::before{}\n- 标签选择器， 如 span{}\n- 通配选择器， 如 *{}\n\n内联样式 \u003e ID 选择器 \u003e 类选择器 = 属性选择器 = 伪类选择器 \u003e 标签选择器 = 伪元素选择器\n\n### nth-child selelctor\n比如我们有一个列表，包含10个以上的item：\n```html\n\u003col\u003e\n  \u003cli\u003ee4rt\u003c/li\u003e\n  \u003cli\u003e66ert\u003c/li\u003e\n  \u003cli\u003ei9etr\u003c/li\u003e\n  \u003cli\u003efsdg\u003c/li\u003e\n  \u003cli\u003egh\u003c/li\u003e\n  \u003cli\u003egh\u003c/li\u003e\n  \u003cli\u003efwr\u003c/li\u003e\n  \u003cli\u003eue56\u003c/li\u003e\n  \u003cli\u003e34s\u003c/li\u003e\n\u003c/ol\u003e\n```\n为开头的前2个item和结尾的后2个item加红色\n```css\nli:nth-child(-n+2),li:nth-last-child(-n+2) {\n    color: red;\n}\n```\n为中间的第4个～6个item加蓝色\n```css\nli:nth-child(n+4):nth-child(-n+6) {\n  color: blue;\n}\n```\n## Resopnsive Design\n### 举例说明响应式设计\n```html\n\u003cdiv class=\"left\"\u003e\n  \u003cp\u003eLeft\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"main\"\u003e\n  \u003cp\u003eMain Content\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"right\"\u003e\n  \u003cp\u003eRight\u003c/p\u003e\n\u003c/div\u003e\n```\n```css\n.left {\n  background-color:#2196F3;\n  padding:20px;\n  float:left;\n  width:20%; /* The width is 20%, by default */\n}\n\n.main {\n  background-color:#f1f1f1;\n  padding:20px;\n  float:left;\n  width:60%; /* The width is 60%, by default */\n}\n\n.right {\n  background-color:#4CAF50;\n  padding:20px;\n  float:left;\n  width:20%; /* The width is 20%, by default */\n}\n\n/* Use a media query to add a break point at 800px: */\n@media screen and (max-width:800px) {\n .left  , .main, .right {width:100%;}\n}\n```\n\n## Flexbox\n### CSS Grid vs Flexbox\n1. CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system (either in a column or a row).\n2. A core difference between CSS Grid and Flexbox is that — CSS Grid’s approach is layout-first while Flexbox’ approach is content-first.If you are well aware of your content before making layout, then blindly opt for Flexbox and if not, opt for CSS Grid.\n3. Flexbox layout is most appropriate to the components of an application (as most of them are fundamentally linear), and small-scale layouts, while the Grid layout is intended for larger scale layouts which aren’t linear in their design.\n4. If you only need to define a layout as a row or a column, then you probably need flexbox. If you want to define a grid and fit content into it in two dimensions — you need the grid.\n\n## Preprocessor\n### Sass\n### Less\n### Stylus\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabeng%2Fcss-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabeng%2Fcss-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabeng%2Fcss-basics/lists"}